What is HTML import and how does it work?
Translation of the article “What are HTML Imports and How Do They Work?”, Paula Borowska.
Have you ever noticed that the inclusion of one HTML page into another is some kind of foreign concept? This is something that should be simple, but this is not often the case. This is not impossible, but difficult. Fortunately, there is HTML import , which allows you to easily place HTML pages, as well as CSS and JavaScript files, inside other HTML pages.
HTML import is an easy to understand thing; This is a way to insert other HTML pages on the page. You can say that there is nothing special about it, so here it is; you couldn't do it that easily before.
')
It is interesting that HTML is the simplest files, but sometimes it’s hardest to work with them. Even PHP files have the ability to include, why can't HTML? Thanks to web components, we can now include some HTML documents in others . Also, with the help of the same tag, we can connect CSS and JavaScript. (Life has become much better.)
Previously, one of the workarounds was to connect using iFrame; these are heavy HTML elements loaded by a separate window inside the current document. This is not a bit of what we need and it’s not very easy to interact with. iFrams can be surprisingly disappointing when you have to work with them. The next option was AJAX, this is when you loaded the page with JavaScript and included its content. This is actually quite an uncomfortable and tedious way.
Before watching the examples, let's look at the syntax for loading a file through an import tag. Import is a new type of link tag, so it should be easy to understand the following line:
Such lines are placed in the header, as you already used to do with JavaScript or CSS files.
For the import to work, the pages must be on the same server. Let's start with the index.html file. This is a simple HTML page with basic import:
See, I didn't lie about how simple everything is; it's as simple as loading a stylesheet or javascript file.
What is inside the imported page?
This is just a div with text inside. No need for body or head or anything else.
To display the imported HTML, we need to write a few lines in JavaScript. This code should be in the main HTML file, in our case, index.html. This code should be in the place where we want to see the imported html. In our example, after 'Hello from Designmodo.'
In our script, we get the content and assign it to a variable. Then we simply add the contents of the variable to the HTML.
Have you ever heard of the scoped CSS attribute? The scoped attribute allows you to limit the action of the tag.
Have you ever noticed that the inclusion of one HTML page into another is some kind of foreign concept? This is something that should be simple, but this is not often the case. This is not impossible, but difficult. Fortunately, there is HTML import , which allows you to easily place HTML pages, as well as CSS and JavaScript files, inside other HTML pages.
Introduction to HTML Import
HTML import is an easy to understand thing; This is a way to insert other HTML pages on the page. You can say that there is nothing special about it, so here it is; you couldn't do it that easily before.
')
It is interesting that HTML is the simplest files, but sometimes it’s hardest to work with them. Even PHP files have the ability to include, why can't HTML? Thanks to web components, we can now include some HTML documents in others . Also, with the help of the same tag, we can connect CSS and JavaScript. (Life has become much better.)
Workarounds
Previously, one of the workarounds was to connect using iFrame; these are heavy HTML elements loaded by a separate window inside the current document. This is not a bit of what we need and it’s not very easy to interact with. iFrams can be surprisingly disappointing when you have to work with them. The next option was AJAX, this is when you loaded the page with JavaScript and included its content. This is actually quite an uncomfortable and tedious way.
Let's start
Basic syntax
Before watching the examples, let's look at the syntax for loading a file through an import tag. Import is a new type of link tag, so it should be easy to understand the following line:
<link rel="import" href="/folder/page.html"> Such lines are placed in the header, as you already used to do with JavaScript or CSS files.
Basic example
For the import to work, the pages must be on the same server. Let's start with the index.html file. This is a simple HTML page with basic import:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>What are HTML imports and how do they work</title> <link rel="import" href="/intro.html"> </head> <body> <h1>Hello from Designmodo</h1> </body> </html> See, I didn't lie about how simple everything is; it's as simple as loading a stylesheet or javascript file.
Inside intro.html
What is inside the imported page?
<div id="intro-dm"> <h2>We're an awesome blog about web design</h2> <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p> </div> This is just a div with text inside. No need for body or head or anything else.
Insert imported HTML
To display the imported HTML, we need to write a few lines in JavaScript. This code should be in the main HTML file, in our case, index.html. This code should be in the place where we want to see the imported html. In our example, after 'Hello from Designmodo.'
In our script, we get the content and assign it to a variable. Then we simply add the contents of the variable to the HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>What are HTML imports and how do they work</title> <link rel="import" href="/intro.html"> </head> <body> <h1>Hello from Designmodo</h1> <script> var link = document.querySelector('link[rel=import]'); var content = link.import.querySelector('#intro-dm'); document.body.appendChild(content.cloneNode(true)); </script> </body> </html> Go to the next level
Have you ever heard of the scoped CSS attribute? The scoped attribute allows you to limit the action of the tag.
. , scoped , , . , scoped HTML-.
h1 , index.html. HTML . , head . scoped, h1 .
<div id="intro-dm"> <style scoped> h1{ color: red; } p{ color: blue; } </style> <h1>About us<h1> <h2>We're an awesome blog about web design</h2> <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p> </div>
scoped, , W3C .
Bootstrap
Bootstrap , , bootstrap.css, boostrap.js . , jQuery; Bootstrap . . Bootstrap , . , . HTML , . , - .
HTML , HTML, CSS JavaScript, . , , . HTML- , HTML . - , . — !. , scoped , , . , scoped HTML-.
h1 , index.html. HTML . , head . scoped, h1 .
<div id="intro-dm"> <style scoped> h1{ color: red; } p{ color: blue; } </style> <h1>About us<h1> <h2>We're an awesome blog about web design</h2> <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p> </div>
scoped, , W3C .
Bootstrap
Bootstrap , , bootstrap.css, boostrap.js . , jQuery; Bootstrap . . Bootstrap , . , . HTML , . , - .
HTML , HTML, CSS JavaScript, . , , . HTML- , HTML . - , . — !. , scoped , , . , scoped HTML-.
h1 , index.html. HTML . , head . scoped, h1 .
<div id="intro-dm"> <style scoped> h1{ color: red; } p{ color: blue; } </style> <h1>About us<h1> <h2>We're an awesome blog about web design</h2> <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p> </div>
scoped, , W3C .
Bootstrap
Bootstrap , , bootstrap.css, boostrap.js . , jQuery; Bootstrap . . Bootstrap , . , . HTML , . , - .
HTML , HTML, CSS JavaScript, . , , . HTML- , HTML . - , . — !
. , scoped , , . , scoped HTML-.
h1 , index.html. HTML . , head . scoped, h1 .
<div id="intro-dm"> <style scoped> h1{ color: red; } p{ color: blue; } </style> <h1>About us<h1> <h2>We're an awesome blog about web design</h2> <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p> </div>
scoped, , W3C .
Bootstrap
Bootstrap , , bootstrap.css, boostrap.js . , jQuery; Bootstrap . . Bootstrap , . , . HTML , . , - .
HTML , HTML, CSS JavaScript, . , , . HTML- , HTML . - , . — !. , scoped , , . , scoped HTML-.
h1 , index.html. HTML . , head . scoped, h1 .
<div id="intro-dm"> <style scoped> h1{ color: red; } p{ color: blue; } </style> <h1>About us<h1> <h2>We're an awesome blog about web design</h2> <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p> </div>
scoped, , W3C .
Bootstrap
Bootstrap , , bootstrap.css, boostrap.js . , jQuery; Bootstrap . . Bootstrap , . , . HTML , . , - .
HTML , HTML, CSS JavaScript, . , , . HTML- , HTML . - , . — !. , scoped , , . , scoped HTML-.
h1 , index.html. HTML . , head . scoped, h1 .
<div id="intro-dm"> <style scoped> h1{ color: red; } p{ color: blue; } </style> <h1>About us<h1> <h2>We're an awesome blog about web design</h2> <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p> </div>
scoped, , W3C .
Bootstrap
Bootstrap , , bootstrap.css, boostrap.js . , jQuery; Bootstrap . . Bootstrap , . , . HTML , . , - .
HTML , HTML, CSS JavaScript, . , , . HTML- , HTML . - , . — !
. , scoped , , . , scoped HTML-.
h1 , index.html. HTML . , head . scoped, h1 .
<div id="intro-dm"> <style scoped> h1{ color: red; } p{ color: blue; } </style> <h1>About us<h1> <h2>We're an awesome blog about web design</h2> <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p> </div>
scoped, , W3C .
Bootstrap
Bootstrap , , bootstrap.css, boostrap.js . , jQuery; Bootstrap . . Bootstrap , . , . HTML , . , - .
HTML , HTML, CSS JavaScript, . , , . HTML- , HTML . - , . — !. , scoped , , . , scoped HTML-.
h1 , index.html. HTML . , head . scoped, h1 .
<div id="intro-dm"> <style scoped> h1{ color: red; } p{ color: blue; } </style> <h1>About us<h1> <h2>We're an awesome blog about web design</h2> <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p> </div>
scoped, , W3C .
Bootstrap
Bootstrap , , bootstrap.css, boostrap.js . , jQuery; Bootstrap . . Bootstrap , . , . HTML , . , - .
HTML , HTML, CSS JavaScript, . , , . HTML- , HTML . - , . — !Source: https://habr.com/ru/post/230751/
All Articles