HTML <template> Tag
Example
The template element holds HTML code without displaying it:
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg">
</template>
Try it Yourself »
Definition and Usage
The <template> tag holds its content hidden from the client.
Content inside a <template> tag will not be rendered.
The content can be made visible and rendered later by using JavaScript.
Use the <template> tag when you have HTML code you want to use over and over again, but not until you ask for it. To do this without the <template> tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 9 | 15.0 |
Differences Between HTML 4.01 and HTML5
The <template> tag is new in HTML5.
Global Attributes
The <template> tag supports the Global Attributes in HTML.
More Examples
Example
Use JavaScript to get the content from a template, and add it to the page:
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
Try it Yourself »
Example
Use the content of a template for each item in an array:
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
function showContent() {
var temp, item, a,
i;
// Get the template element:
temp =
document.getElementsByTagName("template")[0];
// Get the DIV element from the template:
item =
temp.content.querySelector("div");
// For each item in the array:
for (i = 0; i < myArr.length; i++) {
// Create a new
node, based on the template:
a = document.importNode(item,
true);
// Add data from the
array:
a.textContent += myArr[i];
// Append the new node wherever you like:
document.body.appendChild(a);
}
}
</script>
Try it Yourself »
Example
Test browser support for the template element::
if (document.createElement("template").content) {
/*Code for
browsers that supports the TEMPLATE element*/
} else {
/*Alternative code for browsers that do not support the TEMPLATE element*/
}
Try it Yourself »
