Yes, you can include HTML inside of HTML, just like a react / angular component. In this short article, I am going to walk you through, how to include HTML inside of HTML.
Creating files
Go ahead and create a new HTML file and add the following simple code inside of it
<!-- index.html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Include HTML inside of HTML</title>
</head>
<body>
</body>
</html>
now create a new file and name it nav.html
( You can name it anything since this will be the component that we will include in index.html
). Once created you can either write your component or paste this simple navbar code
<!-- nav.html -->
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Adding package
Now we need to add an external NPM package to your index.html, to do that simply paste the following code in your index.html
file.
<script src="https://unpkg.com/htmlincludejs"></script>
Adding HTML inside of HTML
Once you added the script, paste the following include
tag in your index.html
file.
<include src="./nav.html"></include>
Finally, this is how your index.html
file should look like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/htmlincludejs"></script>
<title>Include HTML inside of HTML</title>
</head>
<body>
<include src="./nav.html"></include>
</body>
</html>
Now open this index.html in your browser and BOOM 💥 you have a navbar in your webpage. Though we didn't add a navbar in your index.html
, we just include it from another html
file but we still got navbar. Here is the full code in Codesandbox
%[https://codesandbox.io/embed/floral-glitter-pdxvp?fontsize=14&hidenavigation=1&theme=dark]
Conclusion
I hope you found this article helpful. If you need any help please let me know in the comment section.
Let's connect on Twitter and LinkedIn
👋 Thanks for reading, See you next time
Top comments (3)
This strikes me as a very interesting use case for webcomponents over the (rather crude) method in htmlinclude.js. It also seems like this would hit quite a lot of CSP problems. E.g. I suspect you would struggle to load any script tags or external resources from the included file.
Inspired me to write this article 😄
Include HTML-in-HTML: an iteration
lionel-rowe ・ Aug 9 ・ 3 min read
great, it will be helpful to make html template so that no need to repeat header,footer, component etc. Thanks.