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 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 »