HTML Template Tag
In this page:
The template Element
The template tag defines a block of HTML markup that remains inert and completely hidden when the webpage loads. It serves as a reusable template container that you can copy and instantiate dynamically using JavaScript.
Note: Use the template tag to hold complex component markups that you want to clone dynamically.
Warning: The browser will not download any images or load any scripts inside template tags on page load, as the content is inert.
Example: The template Element
<template id="card-template">
<p>Card content</p>
</template>Cloning Template Content
To display template content on your page, you write a JavaScript script to capture the template's ID, access its content, clone its node structure using cloneNode(true), and append it to your page layout.
Note: Passing the true argument to cloneNode ensures the browser copies the element's entire nested child tree.
Warning: If you do not clone the template content correctly, you can accidentally move the original template nodes, making them unavailable for future use.
Example: Cloning Template Content
<template id="card-template">
<p>Card content</p>
</template>
<script>
const clone = document.getElementById('card-template').content.cloneNode(true);
document.body.appendChild(clone);
</script>Injecting Data into Templates
Once you have cloned the template content, you can easily target its internal elements (like heading or paragraph tags) in your scripts to inject custom data values before appending the clone to your page layout.
Note: Target internal elements in your cloned fragments using querySelector to keep your data injection clean.
Warning: Always target the cloned fragment, and do not target the original template node directly when updating values.
Example: Injecting Data into Templates
<template id="card-template">
<p class="name"></p>
</template>
<script>
const clone = document.getElementById('card-template').content.cloneNode(true);
clone.querySelector('.name').textContent = 'Alex';
document.body.appendChild(clone);
</script>Performance Benefits of template
Before the template element was introduced, developers had to build dynamic layouts by creating elements manually inside long, slow JavaScript loops or using innerHTML strings, which forced browsers to rebuild their layouts and slowed down page performance. Templates are parsed by the browser once, making them incredibly fast and efficient to clone.
Note: Use template tags instead of innerHTML strings to improve your website's performance and loading speed.
Warning: Overusing innerHTML strings inside heavy loops can trigger layout-thrashing performance bottlenecks on mobile devices.
Example: Performance Benefits of template
<template id="row-template">
<li></li>
</template>
<script>
for (let i = 0; i < 100; i++) {
document.body.appendChild(document.getElementById('row-template').content.cloneNode(true));
}
</script>Conditional Layout Toggles
You can use template tags to store entire layout sections (like interactive modal forms, warning notices, or tool panels) that you only want to load when a user clicks a button or triggers an action.
Note: Use template tags to keep complex, secondary layout components hidden until they are needed.
Warning: Since template contents are inert, they do not appear in the default page DOM, making them inaccessible to search crawlers until cloned.
Example: Conditional Layout Toggles
<template id="modal-template">
<div class="modal">Warning notice</div>
</template>
<button onclick="document.body.appendChild(document.getElementById('modal-template').content.cloneNode(true))">
Show Warning
</button>- Writing template code and expecting it to display on page load without cloning it.
- Attempting to target template contents using standard document.getElementById, which will return null.
- Updating values in the original template node directly instead of targeting your cloned fragments.
- The template tag defines an inert block of HTML markup that stays hidden on page load.
- Capture the template ID in your scripts and use content.cloneNode(true) to clone its structure.
- Inject custom data into your cloned fragments before appending them to your webpage layout to keep your site fast and optimized.
Standard HTML5 template elements are supported natively by all modern web browsers.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: