HTML <template> Tag

The HTML <template> tag is a unique element that holds client-side content that can be reused later in a webpage. The content inside a <template> is not rendered when the page loads, making it an invisible placeholder. Instead, the content is stored in the document’s memory and can be dynamically inserted into the page using JavaScript when needed. This is particularly useful for creating reusable blocks of HTML, such as UI components, that you can clone and inject into the DOM when required.

Using the <template> tag improves performance and code readability by preventing duplication of content, reducing the need for multiple inline HTML blocks, and allowing dynamic rendering.

Syntax of the <template> Tag

html
<template>
    <!-- Content goes here -->
</template>

The content inside the <template> tag remains hidden and inactive until it is accessed through JavaScript.

Attributes of the <template> Tag

The <template> tag does not have any special attributes. However, it can support global attributes like class,id and style, for better identification and styling purposes.

  • Global Attributes: Like most HTML elements, <template> can support attributes such as:
    • id: To identify the template and refer to it using JavaScript.
    • class: To apply specific styling or JavaScript behaviors.
    • style: To add inline CSS styles (though rarely needed since the template is not visible).

Additionally, the content inside the <template> tag can include other HTML elements like headings, paragraphs, tables, and images, allowing developers to define complex reusable structures.

Examples of HTML <template> Tag

Example 1: Basic Usage of the <template> Tag.

html
<!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="product-template">
    <div class="product-item">
        <h2>Product Name</h2>
        <p>Product Description</p>
    </div>
</template>

<script>
    // Using JavaScript to clone and insert the template
    let template = document.getElementById('product-template').content.cloneNode(true);
    document.body.appendChild(template);
</script>

</body>
</html>

In this example, the content inside the <template> tag (a product item) is hidden until JavaScript clones it and appends it to the DOM.

Example 2: Dynamically Generating a List Using <template>.

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

<template id="list-template">
    <li class="list-item">Item</li>
</template>

<ul id="dynamic-list"></ul>

<script>
    const list = document.getElementById('dynamic-list');
    const template = document.getElementById('list-template').content;

    for (let i = 1; i <= 5; i++) {
        let newItem = template.cloneNode(true);
        newItem.querySelector('.list-item').textContent = 'Item ' + i;
        list.appendChild(newItem);
    }
</script>

</body>
</html>

Here, the <template> tag is used to dynamically create a list of items using JavaScript. Each list item is cloned from the template and added to the DOM.

FAQs About HTML <template> Tag

Q1: What is the purpose of the HTML <template> tag?
A: The <template> tag is used to define reusable content that is not rendered until it is called or manipulated using JavaScript.

Q2: Is the content inside a <template> tag visible on the webpage?
A: No, the content inside a <template> tag is hidden and only becomes visible when it is cloned and inserted into the document using JavaScript.

Q3: Can I style the content inside a <template> tag?
A: While the content inside a <template> tag does not render initially, you can style it using CSS once it is appended to the DOM.

Q4: Does the <template> tag support attributes?
A: The <template> tag does not have specific attributes but supports global attributes like id, class, and style to help identify and manage it.

Q5: Can the <template> tag improve page performance?
A: Yes, by reducing the need to duplicate HTML elements and by dynamically injecting content, the <template> tag can improve performance and maintainability of the code.

tools

HTML

Related Articles