HTML <template> Tag

What You’ll Learn

The <template> tag stores reusable HTML fragments that stay inert until JavaScript clones them. This guide covers syntax, activation, reusable components, inert behavior, accessibility, and best practices for beginners.

What Is the <template> Tag?

The <template> tag is an HTML element for declaring reusable fragments of markup that can be cloned and inserted into the document later with JavaScript. Content inside a template is inert — it is not rendered, does not load images, and does not run scripts until activated.

Common uses include reusable UI components, list item patterns, conditional content, and client-side templates in single-page applications.

📝 Syntax

Wrap reusable markup between opening and closing template tags:

<template>
  <!-- Your reusable content here -->
</template>

Template with id

<template id="myTemplate">
  <p>This is content inside the template.</p>
</template>

Syntax Rules

• Content inside template is not displayed until cloned into the live DOM.
• Use an id when you need to reference a specific template from JavaScript.
• Access the fragment via template.content (a DocumentFragment).
• Clone with cloneNode(true) or document.importNode(template.content, true).

▶️ Activation via JavaScript

The power of template appears when you clone its content and insert it into the document:

<template id="greetingTemplate">
  <p>This content is from the template!</p>
</template>

<div id="output"></div>

<script>
  const template = document.getElementById('greetingTemplate');
  const clone = template.content.cloneNode(true);
  document.getElementById('output').appendChild(clone);
</script>

• template.content returns a DocumentFragment containing the template markup.
• cloneNode(true) performs a deep clone of all child nodes.
• document.importNode(template.content, true) is an alternative for cross-document cloning.

⚖️ <template> vs Hidden div

Examples Gallery

Inert templates, JavaScript activation, and reusable card components with copy-ready code and live previews.

<template id="myTemplate">
  <p>This is content inside the template.</p>
</template>

<script>
  const template = document.querySelector('template');
  const clone = template.content.cloneNode(true);
  document.body.appendChild(clone);
</script>

<template id="cardTemplate">
  <div class="card">
    <h2>Title</h2>
    <p>Description goes here.</p>
  </div>
</template>

♿ Accessibility

• Inert by default — Template content is not exposed to assistive tech until cloned into the live DOM.
• Clone into accessible structure — Ensure activated content uses proper headings, labels, and ARIA when needed.
• Do not hide critical content only in template — Essential page information should exist in the document or be activated promptly.
• Manage focus — When inserting interactive UI from a template, move focus appropriately for keyboard users.

💡 Best Practices