15. What is the purpose of the <template> tag in HTML and how is it used?

What is the purpose of the `<template>` tag in HTML and how is it used?

The <template> tag in HTML is used to hold client-side content that should not be rendered when the page loads. It defines a template that can be instantiated by JavaScript to create a fully functional DOM structure. This is particularly useful when you need reusable content snippets that you want to insert into the document dynamically.

Key Features

Non-rendering: The content inside the <template> tag is not displayed in the browser by default. It is inert and will not affect the page layout or be seen by users until it is activated by JavaScript.
Reusable: Allows for the creation of reusable HTML snippets that can be cloned and inserted into the DOM multiple times.

Basic Usage

Here is a simple example of how to use the <template> tag:

<!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>
    <button id="loadContent">Load Content</button>
    
    <template id="myTemplate">
        <div class="greeting">
            <h1>Hello, World!</h1>
            <p>This is a template content.</p>
        </div>
    </template>

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

    <script>
        document.getElementById('loadContent').addEventListener('click', function() {
            const template = document.getElementById('myTemplate');
            const clone = template.content.cloneNode(true);
            document.getElementById('content').appendChild(clone);
        });
    </script>
</body>
</html>

In this example:

A <template> tag holds a simple greeting message.
JavaScript is used to clone the content of the template and append it to the #content div when the button is clicked.

Benefits

Performance: By deferring the rendering of parts of your page until they are needed, you can improve initial load performance.
Organization: Keeps your HTML cleaner by separating reusable components from the rest of the page structure.

Conclusion

The <template> tag is a powerful tool for developers who need to manage dynamic content efficiently, offering a way to define and reuse content without cluttering the DOM until necessary.

PREVIOUS QUESTION

QUESTION 15 OF 22

NEXT QUESTION