HTML templates help developers create reusable structures for webpages. The HTML <template> element stores HTML content that is not displayed immediately when a page loads. The content can be accessed and inserted into the webpage later using JavaScript.

Templates are useful for creating repeated interface elements, such as product cards, user profiles, notification boxes, and other dynamic content. They help developers reuse HTML without writing the same markup repeatedly.

What Is the HTML Template Element?

The <template> element contains HTML that remains inactive until it is used. Its contents are not rendered as part of the normal webpage when the browser initially loads the document.

Here is the basic syntax:

<template id="myTemplate">
    <h2>Hello, World!</h2>
    <p>This content comes from a template.</p>
</template>

In this example, the browser stores the heading and paragraph inside the template without displaying them. JavaScript can later copy the template content and add it to the page.

To understand how templates fit into a webpage’s structure, explore HTML semantic elements.

HTML Template Example

The following example demonstrates how to create a template and display its content using JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Template Example</title>
</head>
<body>

    <h1>HTML Templates</h1>

    <template id="cardTemplate">
        <article>
            <h2>HTML Tutorial</h2>
            <p>Learn HTML step by step.</p>
        </article>
    </template>

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

    <button id="showButton">Show Content</button>

    <script>
        const template = document.getElementById("cardTemplate");
        const container = document.getElementById("container");
        const button = document.getElementById("showButton");

        button.addEventListener("click", function () {
            const content = template.content.cloneNode(true);
            container.appendChild(content);
        });
    </script>

</body>
</html>

When the user clicks the button, JavaScript clones the template content and inserts it into the container. Each click adds another copy of the content.

The <article> element represents a self-contained content block. Learn more about HTML articles to understand how it can organize reusable content.

How the HTML Template Element Works

The <template> element works with JavaScript to create reusable HTML content.

• Store content: Write the HTML structure inside <template>.
• Access the template: Use JavaScript to select the template element.
• Clone the content: Use template.content.cloneNode(true) to create a copy.
• Insert the content: Add the copied content to a container using methods such as appendChild().

The true argument copies the template’s descendants as well as the template content itself.

Benefits of HTML Templates

HTML templates provide several advantages:

• Reusability: The same structure can be inserted multiple times.
• Cleaner code: Repeated HTML markup can be stored in one location.
• Dynamic interfaces: JavaScript can generate content when needed.
• Maintainability: Updating the template can simplify changes to repeated structures.

Templates are especially useful when a webpage displays lists of products, articles, or user information. For example, a reusable card can contain an image, heading, and description, with each instance populated using JavaScript.

HTML Template vs Div

The <template> and <div> elements serve different purposes.

<template>	<div>
Stores inactive HTML content	Groups elements in the rendered document
Content is not displayed initially	Content normally appears when rendered
Commonly used with JavaScript	Commonly used for layout and styling

For a better understanding of how containers organize webpage content, read HTML main content.

HTML Templates FAQs

Does the HTML template element display content automatically?

No. Its content remains inactive until it is copied or otherwise used, typically through JavaScript.

Can an HTML template contain other elements?

Yes. It can contain headings, paragraphs, images, lists, articles, and other suitable HTML content.

Is JavaScript required for HTML templates?

JavaScript is commonly used to clone and insert template content. Without additional code, the template’s contents are not displayed as ordinary page content.

Can I use multiple templates on one webpage?

Yes. A webpage can contain multiple <template> elements for different reusable structures, such as product cards, profile cards, and notification messages.

You can also explore HTML page layout to learn how reusable content fits into a complete webpage design.