
From there we are able to access the individual nodes via JavaScript. Using the JavaScript property „import“ we write the complete tree structure of the imported file to a variable. Our example assumes that the first „link“ element loads an HTML file. var extern = document.getElementsByTagName("link").import You can still access them via JavaScript, though. All the texts, images and other media will not be visible as they are not part of the DOM tree of the parent document. Other content from the imported document will be loaded, but not displayed. Even externally referenced elements from the imported document will be loaded into the parent document. To make sure this doesn’t happen, take care of the position of the import link in the parent document. Previously defined stylesheets of the parent document will be overwritten. While the imported document contains stylesheets, these will be directly apllied. This largely simplifies the maintenance of bigger projects. One use case for HTML5 Imports could well be, to collect all the stylesheets and scripts needed in a given project and add to one single HTML file, which then gets imported into all the other project files.

It does not matter whether these elements are marked up in the head or the body of the document. Should the file to be imported contain further „style“ or „script“ elements, these will be imported as well. Using „href“ we attach the URL of the HTML file, just like we are used to when it comes to stylesheets and scripts. Then we add the value „import“ to the „rel“ attribute. All we need to do is use the common „“ element.

Simple Markup in the HeaderĮmbedding an HTML file is simple. Sign up for a free Jotform account to create powerful online forms in minutes - with no coding required.
