Can I use variables in HTML?

Question

I have 5 .html pages. I have the same navigation for each page. Is there any way I can set a variable somewhere that contains my navigation code, and then reference that variable in each of my documents?

I want to do this because if I ever want to edit my navigation, I can just go back and edit 1 source (the variable), as opposed to editing from each document.

You probably want something like this: http://stackoverflow.com/questions/18712338/common-header-and-footer-include-multiple-html-pages — Nathan Merrill, Mar 07 '14 at 18:07
You can use AJAX calls to dynamically load content, though that assumes JavaScript on the client. (It's best to have a fall-back plan in the design if the client doesn't have JavaScript.) There's also things like server-side includes, or any server-side code/framework of choice for building a web application. — David, Mar 07 '14 at 18:09

score 1 · Answer 1 · answered Mar 07 '14 at 18:08

1

yes, this is made with a server-side language like PHP. You would save your navigation in just one page, and in the main page just write:

 <?php include 'navigation.html' ?>

answered Mar 07 '14 at 18:08

Pietro Coelho

1,216
1
17
32

Thanks! I'm wondering if there's any way to pull a specific line of code inside "variable_page.html" as opposed to pulling the whole page? – John Mar 07 '14 at 22:08

score 1 · Accepted Answer · answered Mar 07 '14 at 18:11

Pure HTML (without JavaScript) cannot load in another page on it's own. However, you can use PHP, SHTML, or JavaScript to obtain another page and load it into the page.

PHP

Make sure that your HTML file has been renamed with the .php extension. Then you can add the following line where you want to add the HTML file:

<?php include('some_file_name.html'); ?>

As long as some_file_name exists, that page will load in where the PHP tag is.

SHTML

Make sure that your HTML file has been renamed with the .shtml extension. Then you can add the following line where you want to add the HTML file:

<!--#include virtual="some_file_name.html" -->

Again, as long as some_file_name exists, the page will load in the page at that. Be sure to watch for spacing, especially between the second dash and #, as the line of code will break if there is a space.

JavaScript

The plus side of using JavaScript is that you can keep your HTML file a .html file. However, more code is needed to load in the included file:

<script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includeThis").load("some_file_name.html"); 
    });
    </script> 
...
<div id="includeThis"></div>

This will create a function that will load some_file_name.html where the div id of includeThis is located. This contains more overhead, but you can keep your .html file extension.

Quick question. I'm wondering if there's any way to pull a specific line of code inside "some_file_name.html" as opposed to pulling the whole page? — John, Mar 07 '14 at 21:53
As long as you don't have any scripts in the file, you can select specific elements to load with any generic/specific element selector like this: `$("#includeThis").load("some_file_name.html #elementID")` ` or it could be `.elementClass` that selects multiple elements with the same class to be loaded — Mike Koch, Mar 07 '14 at 22:40

score 0 · Answer 3 · answered Mar 07 '14 at 18:10

You might want to look into using a server side scripting language like ASP.NET or PHP, or using templating (shtml), which have support for doing this on the server side. Alternatively you can use Javascript to do this on the client side, as one commenter showed above, but doing it server side is the most efficient way to do it.

Can I use variables in HTML?

3 Answers3

Linked