HTML <template> (Content Template) Tag

<button onclick="myFunction()">Show hidden template</button>

<template id="demo">
  <h2>Template</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</template>

<script>
function myFunction() {
  let temp = document.getElementById("demo");
  let clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

Meaning

The <template> element allow developers to declare fragments of markup which are parsed as HTML, go unused at page load, but can be instantiated later on at runtime.

The template contents are hidden implicitly since they are not part of the document.

Version: HTML5

Standard Syntax

<template>...</template>

Browser Support

Status

Global Attributes

The <template> element also supports the Global Attributes in HTML.

Event Attributes

The <template> element also supports the Event Attributes in HTML.