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>

Output

Browser Output

html

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	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.

PreviousHTML <slot> Tags NextHTML <shadow> Tag