HTML template Tag

HTML <template> Tag

The HTML <template> tag is used to define a fragment of HTML content that is not rendered immediately when the page loads. Instead, it can be cloned and inserted into the DOM dynamically using JavaScript. This makes the <template> tag ideal for reusable components, content placeholders, and dynamic content rendering.

The content inside the <template> element is inactive by default, meaning it is not displayed or executed until it is explicitly manipulated with JavaScript.

Basic Syntax of HTML <template> Tag

The basic structure of the <template> tag is:

</>

Copy

<template>
    HTML content goes here.
</template>

The content inside the <template> tag is stored but not rendered until it is activated using JavaScript.

Example of Using the <template> Tag

Here’s a basic example of dynamically rendering content using the <template> tag:

index.html

</>

Copy

<!DOCTYPE html>
<html>
    <body>
        <h2>Dynamic Content with Template</h2>
        <button onclick="addItem()">Add Item</button>
        <ul id="item-list"></ul>

        <template id="item-template">
            <li>This is a template item.</li>
        </template>

        <script>
            function addItem() {
                const template = document.getElementById('item-template');
                const clone = template.content.cloneNode(true);
                document.getElementById('item-list').appendChild(clone);
            }
        </script>
    </body>
</html>

Explanation: Clicking the “Add Item” button clones the content of the <template> and appends it to the list dynamically.

Attributes of HTML <template> Tag

Global Attributes: Supports all global attributes like id, class, and style.
Event Attributes: Can include event attributes like onclick, but they are inactive until the template is rendered into the DOM.

Example with Form Templates

Templates are useful for dynamically creating form elements:

index.html

</>

Copy

<!DOCTYPE html>
<html>
    <body>
        <h2>Dynamic Form Template</h2>
        <button onclick="addField()">Add Field</button>
        <form id="dynamic-form"></form>

        <template id="field-template">
            <div>
                <label>Name:</label>
                <input type="text" name="name" required>
            </div>
        </template>

        <script>
            function addField() {
                const template = document.getElementById('field-template');
                const clone = template.content.cloneNode(true);
                document.getElementById('dynamic-form').appendChild(clone);
            }
        </script>
    </body>
</html>

Explanation: Clicking the “Add Field” button appends new input fields to the form dynamically, using the <template> content.

Styling the <template> Content

You can style the content of a template after it is rendered into the DOM. Here’s an example:

index.html

</>

Copy

<!DOCTYPE html>
<html>
    <head>
        <style>
            .template-item {
                background-color: #f0f0f0;
                padding: 10px;
                margin: 5px 0;
                border: 1px solid #ddd;
            }
        </style>
    </head>
    <body>
        <h2>Styled Template Example</h2>
        <button onclick="addStyledItem()">Add Styled Item</button>
        <ul id="styled-list"></ul>

        <template id="styled-template">
            <li class="template-item">This is a styled template item.</li>
        </template>

        <script>
            function addStyledItem() {
                const template = document.getElementById('styled-template');
                const clone = template.content.cloneNode(true);
                document.getElementById('styled-list').appendChild(clone);
            }
        </script>
    </body>
</html>

Result: Each item added dynamically is styled with a light background, padding, and a border.

Practical Applications of the <template> Tag

Reusable Components: Create templates for repeatable content like lists, cards, or widgets.
Dynamic Forms: Add form fields dynamically based on user interaction.
Data-driven Content: Render HTML structures dynamically by fetching and processing data via JavaScript.
Improved Performance: Use templates to preload hidden or conditional content for later rendering.

TutorialKart

HTML <template> Tag