Include HTML File Into Another Using HTML Import

HTML is a customary denunciation that forms a Web page, though it is not easy to extend or to maintain. We need another denunciation as a covering that enables us to generate HTML dynamically. HTML Import is a new customary procedure that tries to make HTML some-more flexible.

HTML Import allows us to embody an HTML record into another HTML file. We can also entrance and reuse a calm inside. This is an sparkling new underline that might change a approach we build HTML in (perhaps) a subsequent decade.

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

Note however that this underline is infirm by deault. To capacitate HTML Import in Chrome, go to a chrome://flags page, capacitate a Enable HTML Imports option, afterwards 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 identical to a approach we embody a stylesheet, we use a link tag. But instead of regulating rel=stylesheet, we supplement a link add-on with rel=import. As an example, here we will embody a template named template.html (I’ve combined a few lines of manikin calm to it).

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

Now if we see a Web page by a Chrome DevTools underneath a Network tab, we can see that a browser (Chrome) loads a template.html.

Keep in mind that a calm in a record that is alien is not now appended to a categorical HTML file. When we see a categorical HTML file, we will see zero during a moment.

Reusing Content

To attach a calm in a file, we need to write a few lines of JavaScript. Normally, we might put a book within a head tag. But in this sold case, we might supplement a book within a body. Also, in sequence for this following book to work, we have to put it after a rel=import. We have to safeguard that a calm in rel=import has been totally installed by a browser before a script, so that a book is means to commend a elements, a element’s id, or a classes within that file.

To begin, we name a template record with this code.

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

This will name all a link add-on with a rel=import. You might import mixed HTML files and wish to name usually a specific couple tag, we might supplement id to a couple add-on and name it regulating a id instead of with a link[rel=import], as shown above.

For example, presumption we import files, like so:

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

you can reinstate a formula with:

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

Once a record is selected, we need to name that calm we will attach to a categorical file. If we have a calm wrapped with an id="content", we can name a calm this way.

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

Now we can attach a calm within a body regulating a JavaScript appendChild() method.

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

The calm should now seem in a categorical file.

Using stylesheet

Contrary to how we attach content, a stylesheet that we put in a alien record will impact a categorical calm directly. Here we have style.css combined in a template file, containing a following formula that should change a divide tone to red.

p 
	color: red;

The character immediately takes effect, as follows.

• View Demo


• Download Source

Final Thought

HTML Imports is useful to build a modular and maintainable web page. But, keep in mind that this method, regulating HTML Import, might not be suitable if SEO is important. The calm is appended regulating JavaScript, that is invisible to hunt engine crawlers. Use HTML Import sparingly, usually to supplement additional or delegate calm to your web page.

Include HTML File Into Another Using HTML Import