Include HTML File Into Another Using HTML Import

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

HTML Import allows us to include an 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, the HTML Import is still in the Working Draft stage and Chrome (v36 and above) is the only browser that supports it.

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

Recommended Reading: A Look Into: The Kit Language

How to Use HTML Import

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

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

Now if you see the Web page through the 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 see 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, in order for this following script to work, we have to put it after the rel=import. We have to ensure that the content in rel=import has been completely loaded by the browser before the script, so that the script is able to recognize the elements, the element’s id, or the classes within that file.

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

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

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

For example, assuming you import files, like so:

 <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.

Using stylesheet

Contrary to how we append content, the stylesheet that we put in the imported file will affect the main content directly. Here we have style.css added in the template file, containing the following code that should change the paragraph color to red.

 p color: red;

The style immediately takes effect, as follows.

View Demo

Download Source

Final Thought

HTML Imports is useful to build a modular and maintainable web design Singapore page. But, 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 design Singapore page.