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