Creating Reusable HTML Components

By Amit Sarkar · March 24, 2024

Reusable components improve maintainability. Here’s how you can do it using modern HTML & JS.

Method 1: HTML Includes (using JS)

<div id="navbar"></div>
<script>
fetch('/components/navbar.html').then(res => res.text()).then(data => {
  document.getElementById('navbar').innerHTML = data;
});
</script>
    

Method 2: Web Components

You can define custom elements using JavaScript classes and templates.