Creating HTML Templates with Reusable Components: Best Practices and Code Examples

By Alessandro D.P.3 min readMarch 10, 2026

Understanding HTML Templates

HTML templates allow developers to define a structure that can be reused multiple times throughout a web application. This approach minimizes redundancy, reduces the likelihood of errors, and makes updates easier. Below are several methods for implementing HTML templates effectively.

Method 1: HTML Template Element

The <template> element is a built-in HTML feature that allows you to define markup that can be cloned and inserted into the DOM when needed.

Example: Using the `<template>` Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Example</title>
</head>
<body>
    <template id="my-template">
        <div class="card">
            <h2 class="title"></h2>
            <p class="description"></p>
        </div>
    </template>

    <div id="container"></div>

    <script>
        const template = document.getElementById('my-template');
        const container = document.getElementById('container');

        const data = [
            { title: 'Card 1', description: 'This is the first card.' },
            { title: 'Card 2', description: 'This is the second card.' },
        ];

        data.forEach(item => {
            const clone = document.importNode(template.content, true);
            clone.querySelector('.title').textContent = item.title;
            clone.querySelector('.description').textContent = item.description;
            container.appendChild(clone);
        });
    </script>
</body>
</html>

Method 2: Server-Side Includes (SSI)

Server-Side Includes (SSI) are directives placed in HTML documents that are processed by the server. This allows you to include reusable components, such as headers, footers, or navigation menus.

Example: Using SSI

<!-- header.html -->
<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

<!-- index.html -->
<!--#include virtual="header.html" -->
<main>
    <h2>Welcome to My Website</h2>
    <p>This is the main content area.</p>
</main>
<!--#include virtual="footer.html" -->

Method 3: Client-Side Templating with JavaScript Libraries

JavaScript libraries like Handlebars.js or Mustache.js allow for more complex templating on the client side. These libraries enable you to create templates with dynamic data binding.

Example: Using Handlebars.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handlebars Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
</head>
<body>
    <script id="entry-template" type="text/x-handlebars-template">
        <div class="post">
            <h2>{{title}}</h2>
            <p>{{body}}</p>
        </div>
    </script>

    <div id="content"></div>

    <script>
        const source = document.getElementById('entry-template').innerHTML;
        const template = Handlebars.compile(source);

        const context = {
            title: 'My First Post',
            body: 'This is the content of my first post!'
        };

        const html = template(context);
        document.getElementById('content').innerHTML = html;
    </script>
</body>
</html>

Method 4: Web Components

Web Components provide a way to create reusable custom elements with encapsulated functionality. This method is particularly useful for building complex user interfaces.

Example: Creating a Simple Web Component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Component Example</title>
</head>
<body>
    <script>
        class MyCard extends HTMLElement {
            constructor() {
                super();
                const shadow = this.attachShadow({ mode: 'open' });
                const card = document.createElement('div');
                card.setAttribute('class', 'card');
                const title = this.getAttribute('title');
                const description = this.getAttribute('description');
                card.innerHTML = `<h2>${title}</h2><p>${description}</p>`;
                shadow.appendChild(card);
            }
        }

        customElements.define('my-card', MyCard);
    </script>

    <my-card title="Card Title" description="This is a description."></my-card>
</body>
</html>

Summary of Template Methods

Method	Description	Use Cases
`<template>` Element	Defines reusable markup in the DOM	Simple, client-side rendering
Server-Side Includes (SSI)	Includes external HTML files on the server	Static websites with common components
Client-Side Templating	Utilizes libraries for dynamic content	Complex UIs with dynamic data
Web Components	Custom elements with encapsulated functionality	Modular, reusable components

Conclusion

Creating HTML templates with reusable components is essential for modern web development. By utilizing the <template> element, Server-Side Includes, client-side templating libraries, and Web Components, developers can ensure a maintainable and scalable codebase. Each method has its strengths, and the choice depends on the specific requirements of your project.