This is an important message requiring you to make a choice if you're based in the EU.

HTML <template> Tag

The <template> is used to store HTML code fragments, which can be cloned and inserted in an HTML document.

The content of the tag is hidden from users being stored on the client-side. It is inert until activated using JavaScript.

The browser processes the content of the <template> element while loading the page to ensure that the code is valid.

Templates can be placed anywhere inside of <head>, <body>, or <frameset> and can contain any type of content which is allowed in those elements.

The <template> tag is a new element in HTML 5.


The <template> tag comes in pairs, the content is written between opening (<template>) and closing (</template>) tags.


<!DOCTYPE html>
    <title>Title of the document</title>
    <template id="myTemplate">
      <p>Template content</p>
    <div id="normalContent">
      <p>First paragraph</p>
    <!-- JavaScript function clones the template and adds it to the document. -->
    <button onclick="useTemplate();">Show content</button>
      function useTemplate() {
      var myTemplate = document.getElementById('myTemplate');
          normalContent = document.getElementById('normalContent');
          clonedTemplate = myTemplate.content.cloneNode(true);


The <template> tag supports the Global Attributes.

Browser support

26+ 22+ 8+ 15+

Do you find this helpful?

Related articles