HTML <template> template tag
The <template> tag in HTML is used to define a block of HTML content that is not rendered when the page initially loads. Instead, the content within the <template> tag can be used as a template for generating or duplicating content dynamically using JavaScript.
Key Features:
- Not Rendered by Default: Content inside the
<template>tag is not displayed on the page when it first loads. - Reusable Content: The
<template>tag allows you to define a structure that can be cloned and inserted into the document at runtime. - JavaScript Integration: Provides a way to programmatically insert or manipulate template content using JavaScript.
Basic Syntax:
<template id="my-template">
<div>
<h2>Title</h2>
<p>This is a template content.</p>
</div>
</template>
In this example:
- The
<template>tag defines a block of HTML that is not rendered on the page. - It has an
idattribute that allows it to be referenced and used in JavaScript.
Example with JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template Tag Example</title>
</head>
<body>
<h1>Dynamic Content Example</h1>
<div id="content"></div>
<template id="my-template">
<div>
<h2>Dynamic Title</h2>
<p>This content was inserted using a template.</p>
</div>
</template>
<script>
// Access the template element
const template = document.getElementById('my-template');
const templateContent = template.content;
// Create a new instance of the template content
const clone = document.importNode(templateContent, true);
// Append the clone to a container element
document.getElementById('content').appendChild(clone);
</script>
</body>
</html>
In this example:
- The
<template>element contains content that is not displayed initially. - JavaScript is used to clone the content of the template and append it to a
<div>with theidof "content".
Attributes:
id: Allows the<template>element to be referenced and used in JavaScript. It is optional but useful for identifying the template.
Use Cases:
- Dynamic Content Generation: Useful for generating or updating content dynamically on a webpage without reloading the page.
- Modular Components: Allows you to define reusable components or structures that can be inserted multiple times.
- JavaScript Frameworks: Commonly used in conjunction with JavaScript frameworks and libraries for rendering views.
Best Practices:
- Keep Templates Simple: Define only the structure and content needed for reuse. Avoid including scripts or interactive elements directly within the template.
- Use JavaScript for Manipulation: Access and manipulate template content using JavaScript to dynamically insert or update the content.
- Ensure Compatibility: The
<template>tag is well-supported in modern browsers, but always check compatibility if targeting older browsers.
Key Points:
- Purpose: The
<template>tag defines content that is not rendered immediately but can be used to generate or manipulate content dynamically with JavaScript. - JavaScript Integration: Allows for easy creation and insertion of dynamic content by cloning the template content.
- Attributes: The
idattribute helps in referencing and using the template content.
In summary, the <template> tag in HTML is a powerful tool for defining and using reusable content blocks that are not rendered initially. It works seamlessly with JavaScript to create dynamic and interactive web experiences by allowing content to be inserted and manipulated programmatically.