<template>

The template tag, or Content Template element, creates a container that holds HTML content that is hidden upon page load.

Syntax

The <template> tag can be used for HTML content that is to be used repeatedly, but not until asked for. The content can later be rendered using JavaScript.

<button onClick="showTemplate()">Show the hidden content</button>

<template>
  <h3>Title of the hidden content</h3>
  <p>A hidden paragraph.</p>
</template>

<script>
function showTemplate() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

Browser Compatibilty

Demos

Have a code example of <template>? Submit a codepen.io demo and we'll showcase it here ↴