HTML Tags
HTML <template> Tag
The
<template>tag in HTML is used to define HTML fragments that are not rendered immediately when a page loads.
Its content remains inactive until it is activated via JavaScript.
This makes it ideal for creating reusable content blocks such as cards, modals, or list items dynamically.
Syntax
html
<template id="templateID">
<!-- HTML content to be cloned later -->
</template>Attributes
| Attribute | Description |
|---|---|
| id | Specifies a unique identifier for the template so it can be accessed using JavaScript. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template Tag Example</title>
</head>
<body>
<h2>Template Example</h2>
<template id="user-template">
<div style="border:1px solid #ccc; padding:10px; margin:5px; border-radius:5px;">
<h3>User: <span class="name"></span></h3>
<p>Role: <span class="role"></span></p>
</div>
</template>
<div id="user-container"></div>
<script>
const users = [
{ name: "Swapnil Raja", role: "Web Developer" },
{ name: "Alissha", role: "Principal" }
];
const template = document.getElementById("user-template");
const container = document.getElementById("user-container");
users.forEach(user => {
const clone = template.content.cloneNode(true);
clone.querySelector(".name").textContent = user.name;
clone.querySelector(".role").textContent = user.role;
container.appendChild(clone);
});
</script>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | No |
All major browsers support <template> tag except of IE.
Notes
- The
<template>element is not displayed when the page loads. - It is commonly used to create client-side templates that can be cloned and inserted into the DOM using JavaScript.
- Content inside
<template>remains inactive - scripts inside it won’t execute, and images won’t load until inserted into the DOM.
Conclusion
The <template> tag provides a powerful and efficient way to define reusable and hidden HTML structures that can be dynamically rendered using JavaScript.
It is an essential tool for building modular, component-based, and interactive web applications.