Path // www.yourhtmlsource.com → Reference → <template>

<template>

The <template> element is a mechanism for holding HTML content that is not rendered when a page loads, but can be instantiated at runtime using JavaScript. The content inside a template is inert: scripts do not run, images do not load, and audio does not play until the template is activated. This makes it ideal for defining reusable markup that will be used multiple times or generated dynamically.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

The element requires both opening and closing tags. The content inside is parsed as HTML but not rendered to the page. It exists in an inert DocumentFragment accessible via the template's content property. To use the template content, you must clone it using JavaScript and insert it into the DOM.

Attributes

id - An identifier for referencing the template from JavaScript. This is the most commonly used attribute to select and clone the template content.
<template id="user-card">...</template>
Global attributes - The <template> element supports all global attributes such as id, class, style, lang, and dir.

JavaScript property:

content - Returns a DocumentFragment containing the template's content. This is the primary way to access and clone the template markup.

Examples

Basic Template with JavaScript Instantiation

<template id="greeting-template">
  <div class="greeting">
    <h2>Hello!</h2>
    <p>Welcome to our website.</p>
  </div>
</template>

<div id="container"></div>

<script>
const template = document.getElementById('greeting-template');
const clone = template.content.cloneNode(true);
document.getElementById('container').appendChild(clone);
</script>

Reusable List Item Template

<template id="item-template">
  <li class="product-item">
    <span class="product-name"></span>
    <span class="product-price"></span>
    <button class="add-to-cart">Add to Cart</button>
  </li>
</template>

<ul id="product-list"></ul>

<script>
const products = [
  { name: 'Widget', price: '$9.99' },
  { name: 'Gadget', price: '$19.99' },
  { name: 'Gizmo', price: '$14.99' }
];

const template = document.getElementById('item-template');
const list = document.getElementById('product-list');

products.forEach(product => {
  const clone = template.content.cloneNode(true);
  clone.querySelector('.product-name').textContent = product.name;
  clone.querySelector('.product-price').textContent = product.price;
  list.appendChild(clone);
});
</script>

Shadow DOM Usage

<template id="custom-element-template">
  <style>
    .wrapper {
      border: 2px solid #333;
      padding: 10px;
      border-radius: 5px;
    }
  </style>
  <div class="wrapper">
    <slot name="title"></slot>
    <slot></slot>
  </div>
</template>

<script>
class CustomCard extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('custom-element-template');
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}
customElements.define('custom-card', CustomCard);
</script>

<custom-card>
  <h3 slot="title">Card Title</h3>
  <p>This content goes in the default slot.</p>
</custom-card>

When to Use

Use the <template> element when:

Creating reusable HTML structures that will be instantiated multiple times
Building dynamic content that is generated from data (e.g., API responses)
Implementing client-side rendering without loading content immediately
Defining the structure for Web Components and Custom Elements
Storing markup that should not trigger resource loading until needed
Separating HTML structure from JavaScript logic for cleaner code

Benefits of using <template>:

Content is inert - scripts don't execute, images don't load, styles aren't applied
HTML is parsed once and can be cloned efficiently many times
Cleaner separation of concerns compared to string-based templating
Browser validates HTML syntax at parse time
Works well with Web Components and Shadow DOM

Accessing template content: