Almost every programming language offers you an option to use the content of another file in the file at hand. Basically, it’s a very old idea. Sooner or later programs become large and larger, so developers started to split the files into smaller building blocks. First, they invented subroutines, later procedures, and functions. Later they invented higher-level building blocks like modules, classes, and packages. One of the early ideas was to include the content of another file. To a certain extent, that’s always been possible in HTML. You can include CSS files by writing
Funny thing is there’s no way to include the content of an HTML file into another HTML file.
That’s very strange because it’s such a useful feature. Server-side languages like PHP fix the problem by providing server-side includes. Probably that’s why the HTML standardization team didn’t add HTML import prior to HTML5. Even so, a quick glance at CanIUse.com is a bit disappointing. You can use the official W3C standard on Chrome, Opera and Android. A second closer look reveals that this particular HTML5 standard is still in the “draft” stadium at the time of writing (June 2016).
What may be in store for you
<link /> – in the header of your HTML page:
<link rel="import" href="myFavoriteInclude.html">
The next step is to define a div in your HTML page which is going to contain the include file:
This message is going to be replaced by the include file.
Finally, you put the content of the include file into that div:
var link = document.querySelector('link[rel="import"]');
var content = link.import;
var el = content.querySelector('.put-include-here');
This is a bit cumbersome, but of course, it’s much more flexible than a simple HTML include. You can do anything with the file loaded by the import link. When I tried this feature, I was even able to load different files by changing the
href of the
href was enough to make the browser load the file.
<include-polyfill href="myFavoriteIncludeFile.html" />
AngularJS comes close to my ideal solution:
There are only two drawbacks. First, you have to use AngularJS. That’s fine if you want to use it anyway, but it’s a no-go otherwise. Second, AngularJS cares about security. It goes without saying that security is a good thing, but in this case, it means many tags are ignored by
I didn’t try this one, so I can say little about it, but it appeared on the front page of my search result, it looks nice, and it comes from a source I consider trustworthy, so chances are that
w3IncludeHTML is a good alternative for you. Using it seems to be pretty straightforward:
I take it most of you use jQuery, so using jQuery to load the include file is little to no overhead. As usual, jQuery isn’t activated by an HTML directive like
Wrapping it up
Still, I wonder why such a simple feature hasn’t made it into the HTML standard yet. Probably that’s due to the “good enough” principle. Most web designer and web developers can use another solution, such as PHP server-side includes, so they don’t need HTML includes.