HTML template Tag: How it Works with Examples

The HTML <template> tag lets you store HTML content that won’t show up right away. JavaScript can pull it in and display it when needed.

What is the <template> Tag in HTML?

The <template> tag in HTML holds client-side content that does not render when the page loads. It’s a way to save reusable HTML you can add later with JavaScript.

Here is the basic tag:

<template>
  <!-- inert HTML content -->
</template>

Anything inside <template> won’t show up on the page right away. The browser keeps it in memory as a special fragment, not the live page.

This means:

• The content remains inactive.
• It doesn’t interfere with page layout or scripts.
• You can copy it and insert it whenever you need.

A <template> can hold any valid HTML. That includes <script> and <style>, but those elements stay inactive until added to the DOM.

• You still need to follow the normal rules for how HTML elements nest.
• Make sure the HTML is written properly so it works as expected.

Here is a quick example:

<template id="user-card">
  <div class="user">
    <h2></h2>
    <p></p>
  </div>
</template>

Scripts inside a template won’t run unless you insert them into the page. So, styles inside a template don’t affect the rest of the page.

<template>
  <style>
    .hidden { display: none; }
  </style>
  <script>
    console.log('This won\'t run');
  </script>
</template>

Here’s what makes it different from regular HTML elements:

• Not Rendered: <template> does not render content.
• Used for Reuse: Content is designed to be cloned and reused via JavaScript.
• DocumentFragment: Template contents live in memory until explicitly inserted into the DOM.
• Inert Scripts: Scripts don’t execute unless cloned and inserted manually.

Why Use the <template> Tag in HTML:

• It lets you keep HTML out of the way until you need it.
• It helps you to keep your HTML clean and simple.
• <template> is useful when you create reusable UI components.
• It supports dynamic content, which allows you to render it with JavaScript frameworks or vanilla DOM methods

How to Use the HTML <template> Tag with JavaScript

First, get the template by its ID or a CSS selector.

const template = document.querySelector('#my-template');

You can clone template content with document.importNode():

const clone = document.importNode(template.content, true);

The true means it copies everything inside it, not just the top level. You can insert the cloned node anywhere in your DOM:

document.body.appendChild(clone);

This method allows UI updates and renders modular content.

Browser Support

All modern browsers support the <template> tag:

• Chrome 26+
• Firefox 22+
• Safari 7.1+
• Edge 13+
• Opera 15+

IE 11 does not support <template> natively.

Examples of HTML <template> Tag

Render a predefined card on button click

<template id="card-template">
  <div class="card">
    <h3>Card Title</h3>
    <p>You can use this card again.</p>
  </div>
</template>
<button onclick="addCard()">Add Card</button>
<div id="container"></div>

<script>
function addCard() {
  const tmpl = document.getElementById('card-template');
  const clone = document.importNode(tmpl.content, true);
  document.getElementById('container').appendChild(clone);
}
</script>

A card is cloned from a template and added to the container only when the button is clicked.

Populate user data from JSON with the template

<template id="user-template">
  <li>
    <strong class="name"></strong>: <span class="email"></span>
  </li>
</template>
<ul id="user-list"></ul>

<script>
const users = [
  { name: 'David', email: 'david@example.com' },
  { name: 'Alaba', email: 'alaba@example.com' }
];
const tmpl = document.getElementById('user-template');
const list = document.getElementById('user-list');

users.forEach(user => {
  const clone = document.importNode(tmpl.content, true);
  clone.querySelector('.name').textContent = user.name;
  clone.querySelector('.email').textContent = user.email;
  list.appendChild(clone);
});
</script>

Loops through user data and fills in template placeholders. Each user appears as a list item. That keeps the HTML more dynamic.

Create nested components within multiple templates

<template id="profile-template">
  <div class="profile">
    <h2 class="username"></h2>
    <div class="bio"></div>
  </div>
</template>
<template id="bio-template">
  <p>She likes JavaScript and HTML templates!</p>
</template>
<div id="profiles"></div>

<script>
const user = { name: 'Celina Developer' };
const profileTmpl = document.getElementById('profile-template');
const bioTmpl = document.getElementById('bio-template');

const profileClone = document.importNode(profileTmpl.content, true);
profileClone.querySelector('.username').textContent = user.name;

const bioClone = document.importNode(bioTmpl.content, true);
profileClone.querySelector('.bio').appendChild(bioClone);

document.getElementById('profiles').appendChild(profileClone);
</script>

This example shows how to nest templates for modular and component-like design.

Show the message only under a specific condition

<template id="message-template">
  <div class="alert">Welcome back, admin!</div>
</template>
<div id="messages"></div>

<script>
const userRole = 'admin';
if (userRole === 'admin') {
  const tmpl = document.getElementById('message-template');
  const clone = document.importNode(tmpl.content, true);
  document.getElementById('messages').appendChild(clone);
}
</script>

The template content only appears based on a condition.

Wrapping Up

In this article, you learned how the <template> tag works and why it’s useful. Also, you saw how to use it with JavaScript and how it fits into modern web development.

Here’s a quick recap:

• <template> holds HTML that’s inert until used.
• It helps reduce DOM clutter and supports reusable UI components.
• You can clone and insert content with importNode().
• It’s supported in all modern browsers, but not IE11.
• Templates work great with loops and conditions. They also work with JSON-driven interfaces.

FAQs

<template id="card">
  <div class="card">Content</div>
</template>

const tpl = document.getElementById("card");
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);

Similar Reads