Introduction

For static html sites, html5 importing has always been a task that needed to be hacked via scripting or programming language. Say if we wanted a navigation menu, we would either have to change the link on every single static page, or import the page somehow with javascript, php or some other scripting language. The future of HTML5 is not so grim, in the latest version of Google Chrome there is a flag called Enable HTML Imports. This flag (when enabled) allows you to call html files from within your main html file to dynamically import html as the page loads.

Currently, Chrome is the only browser that “supports” this feature (we wouldn’t call it fully supporting the feature since most web browser users will not have this flag enabled). It’s only a matter of time though, that other browsers will follow suit and jump on this spec’s bandwagon.

In Practice

First you need to enable HTML includes in Chrome by navigating to the flags page and checking “Enable HTML Includes”.

So you may be thinking to yourself, okay you can import html files, what’s the big deal? Let’s run through a couple of comparisons of some html files that don’t use import compared to what the same files would look like without it.

This example shows a basic configuration for including Bootstrap files:

This type of setup is common for developers who only want to include what they need for their project and not the whole framework. Well, with HTML Includes, we’ll be able to reference all of those dependencies using something like this:

Our include within our project’s head tag:

And then our bootstrap.html file will contain all of the dependencies referenced in our previous code snippet.

Why would we do this? Well, if this was a generally accepted spec by all browsers we could easily call all of our required scripts and css files from a cdn with one reference, and it counts all files from each URL as one request.

In conclusion, the more modular your code is, the easier it will be for you and other developers to understand what is happening. Additionally, dynamically programmed elements and dependencies will be quarantined into specific groups within their own html files which helps to further improve organization. Keep an eye out for the HTML Include feature to snake its way into the official html spec and learn how to use it now so you can benefit from it immediately upon it’s release.