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
<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
<!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>Output
Browser Output
There is no visible output for the <template> tag itself.
Its content remains hidden until activated and rendered using JavaScript.
Please use our TryIt Editor to see how the content dynamically appears when the script runs.
Browser Support
 Chrome |  Firefox |  Edge |  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.
