HTML Include


by Dale Stubbart

When your website has multiple pages, you might find that you repeat some part of your HTML file on every page. One example of this is a menu. It&'; the same on every page, except for perhaps for the button to the current page being highlighted somehow. When you find that lots of code is repeated, it can be tempting to try to store that code in a separate file and somehow reduce it to one line in all the HTML files for your website.
This can be done. But, how? HTML does not provide that ability. Yet, there are other ways to accomplish this.

The first, and in my opinion the best way, is to create a javascript function to do that work for you. It will also allow that snippet of HTML to by dynamic based on parameters that are passed to the function (or global variables that are set)
First, create a file for javascript functions. You can call it something creative like functions.js. To use this file, place the following in the <head> of each html file for your website.
<script src="functions.js?version=1"></script>
Each time this file is changed, you&';ll need to up that version in every html file. Or, you can wait until Google finally decides to read function.js again. But, that might be several days. Changing the version is an easy way to make Google read it the next time somebody looks at any of your webpages. That way, they'll be looking at the latest version.

Still, we wish that there were a simpler way to do this. We wish we could do that for most of the stuff in <head>. However, that stuff we need to have set when the page first loads. We can&';t wait for a javascript function. Well, we can but it&';s better if we don&';t. Something else might get the wrong impression about our website.
So, how do you set HTML up to include this snippet? First, you create a tag to attach it to. I often use a div.
<div id="include01"></div>
follow that with
<script>include_html(parameter1, parameter2, ..., "include01")</script>
The last or almost last thing in your function named include_html should be a statement that sets a string of html to the innerHTML of the element id that is passed (include01 in this case).
The function looks something like this:
function include_html(parameter1, ..., insertelement){
var x=document.getElementByID(insertelement)
var a=''
a+=firstpieceofHTML
a+=nextpieceofHTML
....
x.innerHTML=a
}

You might be asking yourself what some of those other methods I mentioned might be. Well, one I used to use was a php include. You don&';t really have to know php to use it. It&';s basically one line of code. So, that&';s great. There are ways to pass parameters back and forth between vanilla javascript and php. Some of these are also not that difficult. But, php runs on the server side and most php is supposed to be on the server side. If it&';s not anything private or that needs to be secured, I think you&';re OK putting it on the client-side (in a folder with your html files).
That one line of code?
<?php include "html_include01.html" ?>
Just place that in the <body> of each of your HTML websites that you want to include that snippet.

Charles Coyier lists several methods for including HTML snippets, starting with php include at CSS-Tricks.com. I think they&';re all server-side solutions, except iframes which are just HTML. Iframes have there own constraints and might not give you what you&';re looking for.

W3 Schools has their own solution to this. Basically, you add an attribute to a div (one that&';s not a real attribute). You use that attribute to specify the name of the include file. At the end of your HTML file, you execute a javascript function that&';s probably in the <head> portion of this website file or in functions.js. This function uses XMLHttpRequest to fetch the file. For some reason I can&';t fathom, it also calls the function itself. You might be better off using the newer javascript Fetch API rather than XMLHttpRequest. I find them equally confusing. Neither is really simple or straightforward IMHO. I&';ll stick with my vanilla javascript function. It&';s much easier to understand. Still, in case your interested look here for more info.
Amirmahdi Naghsh suggested using Web Components. That&';s a Web API that allows you to use custom HTML tags for your webpage. The Web Components link says to use their <template> and <slot> custom tags for something like this. I think using this method for inserting HTML snippets might not take too much effort. However, just specifying those two tags as tags just killed one of my functions. So, take care with them.