HTML - HTML <template> Element and Reusable Content

The HTML <template> element is a special container used to store HTML content that should not be displayed immediately when the webpage loads. Instead, the content inside the template remains inactive until it is explicitly used through JavaScript. This feature allows developers to create reusable HTML structures without duplicating code throughout the document.

The <template> element is particularly useful in modern web development because it separates reusable content from the visible webpage. Developers can define a block of HTML once and then create multiple copies whenever needed, making applications easier to maintain and update.

What is the <template> Element?

The <template> element holds HTML markup that is not rendered by the browser when the page is loaded. Unlike normal HTML elements, the contents of a template remain hidden and inactive.

For example:

<template id="userCard">
    <div class="card">
        <h2>User Name</h2>
        <p>User Information</p>
    </div>
</template>

In this example, the browser stores the content but does not display it on the webpage.

Characteristics of the <template> Element

Some important characteristics include:

  • The content is not displayed automatically.

  • Images inside the template are not loaded until the template is used.

  • Scripts inside the template do not execute immediately.

  • The content can be cloned multiple times.

  • Templates improve code organization and reduce duplication.

Why Use the <template> Element?

Without templates, developers often repeat the same HTML code several times. This creates larger files and makes maintenance difficult.

Instead of writing identical code repeatedly:

<div class="card">
    <h2>Student 1</h2>
</div>

<div class="card">
    <h2>Student 2</h2>
</div>

<div class="card">
    <h2>Student 3</h2>
</div>

A single template can be created and reused for every student card.

Benefits include:

  • Less repetitive HTML

  • Easier maintenance

  • Cleaner document structure

  • Faster development

  • Consistent layout across components

Basic Structure of a Template

<template id="messageTemplate">
    <div class="message">
        <h3>Title</h3>
        <p>Description goes here.</p>
    </div>
</template>

The content inside this template remains hidden until JavaScript inserts it into the webpage.

Accessing a Template with JavaScript

The template is accessed using its ID.

<template id="cardTemplate">
    <div class="card">
        <h2>Employee</h2>
        <p>Department</p>
    </div>
</template>

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

<script>
const template = document.getElementById("cardTemplate");
const clone = template.content.cloneNode(true);

document.getElementById("container").appendChild(clone);
</script>

Output:

Employee
Department

The template content becomes visible only after it is cloned and inserted into the document.

Understanding template.content

Every template contains a special property called content.

const template = document.getElementById("cardTemplate");

console.log(template.content);

The content property returns a DocumentFragment, which contains all elements stored inside the template.

The content is separate from the visible webpage until it is inserted into the DOM.

Cloning Template Content

Templates are usually cloned before being inserted into the webpage.

const clone = template.content.cloneNode(true);

Here:

  • cloneNode() creates a copy.

  • true means perform a deep clone, including all child elements.

If false is used, only the parent node is copied without its children.

Example: Creating Multiple Cards

<template id="productTemplate">
    <div class="product">
        <h2>Product Name</h2>
        <p>Price</p>
    </div>
</template>

<div id="products"></div>

<script>

const template = document.getElementById("productTemplate");
const container = document.getElementById("products");

for(let i=1; i<=3; i++)
{
    const clone = template.content.cloneNode(true);

    clone.querySelector("h2").textContent = "Product " + i;
    clone.querySelector("p").textContent = "$" + (i*100);

    container.appendChild(clone);
}

</script>

Output:

Product 1
$100

Product 2
$200

Product 3
$300

Only one template is defined, but three product cards are created.

Modifying Template Content

Each cloned copy can be modified independently.

const clone = template.content.cloneNode(true);

clone.querySelector("h2").textContent = "Laptop";
clone.querySelector("p").textContent = "$800";

Another copy can contain different information.

const clone2 = template.content.cloneNode(true);

clone2.querySelector("h2").textContent = "Phone";
clone2.querySelector("p").textContent = "$500";

Each clone remains independent of the others.

Using Templates with Lists

Templates are ideal for generating dynamic lists.

Example:

<template id="studentTemplate">
    <li></li>
</template>

<ul id="studentList"></ul>

<script>

const students = ["Asha","Rahul","Sneha"];

const template = document.getElementById("studentTemplate");
const list = document.getElementById("studentList");

students.forEach(student => {

    const clone = template.content.cloneNode(true);

    clone.querySelector("li").textContent = student;

    list.appendChild(clone);

});

</script>

Output:

• Asha
• Rahul
• Sneha

This approach is much cleaner than manually writing every list item.

Advantages of Using Templates

Reusable Code

One template can generate hundreds of similar elements.

Cleaner HTML

The visible page contains only the necessary content.

Easier Maintenance

Changes made to the template automatically apply to future clones.

Better Performance

Hidden content is not rendered until needed, reducing unnecessary work during page load.

Improved Organization

Templates separate reusable structures from the rest of the document, making the code easier to read.

Limitations of the <template> Element

  • Templates are not displayed automatically.

  • JavaScript is usually required to use template content.

  • Older browsers may require polyfills for full support.

  • Large templates with many nested elements can become harder to manage if not organized properly.

Common Use Cases

The <template> element is commonly used in:

  • Product listing pages

  • Employee or student profile cards

  • Chat message interfaces

  • Shopping cart items

  • Blog post previews

  • Comment sections

  • Notification panels

  • Dashboard widgets

  • Dynamic tables

  • Single Page Applications (SPAs)

Best Practices

  • Assign a unique id to every template for easy access.

  • Keep templates focused on a single reusable component.

  • Use cloneNode(true) to copy all child elements.

  • Modify cloned content before inserting it into the DOM.

  • Avoid placing unnecessary or excessively large content inside templates.

Summary

The HTML <template> element provides a powerful way to define reusable HTML structures that remain inactive until needed. By storing markup separately from the visible page, it helps reduce duplication, improve maintainability, and keep code organized. When combined with JavaScript, templates make it easy to create dynamic interfaces such as cards, lists, forms, and other repeating components, making them an essential feature in modern web development.