HTML5 Importing In The Near Future
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.
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:
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
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:
<link rel="include" src="bootstrap.html">
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.