How to Include One HTML File Inside Another Using HTML Import

HTML is the standard language that forms a web page, but it is not easy to extend or maintain. We need another language as a layer to generate HTML dynamically. HTML Import is a new standard module that aims to make HTML more flexible.

HTML Import allows us to include one HTML file into another HTML file. We can also access and reuse the content inside. This is an exciting new feature that may change the way we build HTML in (perhaps) the next decade.

At the time of this writing, however, HTML Import is still in the Working Draft stage, and Chrome (v36 and above) is the only browser that supports it.

Note that this feature is disabled by default. To enable HTML Import in Chrome, go to the chrome://flags page, enable the “Enable HTML Imports” option, and then restart Chrome. Let’s start experimenting with HTML Import.

How to Use HTML Import

Including an HTML template is similar to how we include a stylesheet. We use the <link> tag, but instead of using rel=stylesheet, we use rel=import. For example, here I will include a template named template.html (with a few lines of dummy content added to it).

<link rel="import" href="template.html">

Now, if you look at the web page through Chrome DevTools under the Network tab, you can see that the browser (Chrome) loads the template.html.

Keep in mind that the content in the file that is imported is not instantly appended to the main HTML file. When you view the main HTML file, you will see nothing at the moment.

Reusing Content

To append the content in the file, we need to write a few lines of JavaScript. Normally, we may put a script within the head tag. But in this particular case, we may add the script within the body. Also, for the following script to work, we must put it after the rel=import. We need to ensure that the content in rel=import has been completely loaded by the browser before the script, so the script can recognize the elements, element’s id, or the classes within that file.

To begin, we select the template file with this code.

var getImport = document.querySelector('link[rel=import]');

This will select all the link tags with rel=import. You may import multiple HTML files and want to select only a specific link tag, you can add an id to the link tag and select it using the id instead of link[rel=import], as shown above.

For example, assuming you import files like this:

<link rel="import" id="template-file" href="template.html">

You can replace the code with:

var getImport = document.querySelector('#template-file');

Once the file is selected, we need to select which content we will append to the main file. If you have the content wrapped with an id="content", you can select the content this way.

var getContent = getImport.import.querySelector('#content');

Now we can append the content within the body using the JavaScript appendChild() method.

document.body.appendChild(document.importNode(getContent, true));

The content should now appear in the main file.

View demo Download source

Final Thought

HTML Imports is useful for building a modular and maintainable web page. However, keep in mind that this method, using HTML Import, may not be suitable if SEO is important. The content is appended using JavaScript, which is invisible to search engine crawlers. Use HTML Import sparingly, only to add additional or secondary content to your web page.