Search code examples
htmlweb-component

Can I import an HTML file through another HTML import file?

I have 4 files lets say a.html, b.html, c.html, and d.html. I want b.html needs to have c.html, and d.html imported. a.html needs b.html. Can I import using <link rel='import' href='/path/to/b.html'> in a.html, then in b.html have the following:

<link rel='import' href='/path/to/c.html>
<link rel='import' href='/path/to/d.html>
Solution

  • Including an HTML template is similar to the way we include a stylesheet, we use the tag. But instead of using rel=stylesheet, we add the link tag with rel=import. As an example, here I will include a template named template.html (I’ve added a few lines of dummy content to it).<link rel="import" href="template.html">

    Now if you see the Web page through the Chrome DevTools under the Network tab, you can see that the browser (Chrome) loads the template.html. Keep in mind that the content in the file that is imported is not instantly appended to the main HTML file. When you see the main HTML file, you will see nothing at the moment.