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.

Everything within the <template> element is parsed like regular HTML. However, there are some exceptions:

  • It doesn't get rendered.
  • The <script> tags within it don't get run.
  • The <style> tags within it don't get evaluated.
  • External resources are not rendered.
  • Content within this element is not considered to be in the document. If you use document.getElementById() or querySelector() in the main page will not turn back child nodes of a template.


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

Example of the HTML <template> tag:

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