DEV Community

Cover image for Include HTML Inside of HTML - Just Like React Components
Suhail Kakar
Suhail Kakar

Posted on • Originally published at blog.suhailkakar.com

Include HTML Inside of HTML - Just Like React Components

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
fjones profile image
FJones • Edited

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.

Collapse
 
lionelrowe profile image
Collapse
 
nikhilroy2 profile image
Nikhil Chandra Roy

great, it will be helpful to make html template so that no need to repeat header,footer, component etc. Thanks.