HTML imports are an experimental but promising way of embedding content. Imports are used to embed one HTML document into another; when you think about it this should not be something too difficult, but it currently is. Just like the name of this post suggest, I will give you an introduction to HTML imports by learning how they work and what exactly do they do.
What’s the Point of HTML Imports?
Enabling HTML imports
The very big downside of HTML imports is that they are not widely supported, yet. Google Chrome 31 does, in fact, currently support it. Of course, you need to manually enable it by going to chrome://flags, finding HTML imports and clicking enable. Once that is done, you’ll have to make sure to restart your browser for the change to take effect.
Using Imports Within a Web Page
First and foremost, make sure you have a standard HTML document. Below you can see the plain website text I will be starting out with.
< !DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Introducing HMTL imports</title> </head> <body> <h1>Demoing HTML imports</h1> </body> </html>
That’s a bare HTML document if I’ve ever seen one. The way HTML imports works is by linking one page within another. You can imagine that we will be adding the import within the head, where every other linked page is held. HTML imports are called through a link that then references a specific file – the file you wish to embed.
In order to do this, you will need the <link /> element. Within, you must specify the rel to be import. This set up the relationship of the link to be an import; I’d like to think this is obvious. No? Lastly you have to specify the path to the file you wish to include. Voila, you are on you way to setting up an imported file!
<head> <link rel="stylesheet" href="/path/to/styles.css"/> </head>
The Imported HTML page
I also have a second page called myPage.html; that’s the one which will be embedded. There is not much within it, see for yourself.
<div id="text"> <h1>Hello from Web Design Views</h1><h1> <h2>Here's a little bit about us</h2> <p>We aim to create a site where anyone interested in these topics can come and solve their problems and learn more on a specific subject.</p> </h1></div>
To keep this introduction simple you can clearly see there is not that much in the file I will be importing. But you can also see that all the file is made up of is a div with a couple of headings and a paragraph. The file lacks a typical HTML structure with document declaration, a head or a body. That’s on purpose. The imported HTML file doesn’t need to have all that jazz because once it will be rendered it will simply be pasted into the original HTML – the one which is using the imported file. Therefore, the mark up would be duplicated so only put in it the HTML you want to see.
Actually Importing an HTML Page
< !DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Introducing HMTL imports</title> </head> <body> <h1>Demoing HTML imports</h1> <script> var link = document.querySelector('link[rel=import]'); var content = link.import.querySelector('#text'); document.body.appendChild(content.cloneNode(true)); </script> </body> </html>
Within the <script></script> tags there will be three lines of code that you’ll also need in order for the import to take place. First, we are going to define a new variable that will query the import. It initiates the import, if you will, from that specific file. Then you will also set another variable that will fetch the content you want from the imported file, myPage.html. This will give us access to content from the text ID as we are trying to import everything within it.
Importing an Import
With that all said and explained, did you know you can include an import within your import? I’m not saying that is something you should do. However, that is something you could do if you wanted to create something extra complicated within your website. Actually, I don’t recommend this at all but I thought to throw this out here because that is pretty cool.
The sequence in which imports are called is actually quiet smart. The way the variables are defined and called means that the event handlers are going to be called before loading the import on the page. Because this uses variables, there won’t be any errors or issues if there is nothing for the handlers to call – which is actually a good thing. There is, of course, still a down side which is that your website may look awkward with the content missing.
Just like with iFrames of AJAX, HTML imports won’t solve the issue of missing content. However, the way the website will handle what happened when the content is unavailable is improved. When there is nothing within an iFrame you know that something is missing, that something went wrong because it usually gives you an error. However, with HTML imports, like I said before, the content simply won’t show up. There wont be any weird behavior or errors on a page to indicate otherwise.
This is a topic that everyone should be excited about as it’s an incredible improvement. So let me know your thoughts, are you in fact excited about this and the effect it will have on the industry?