HTML - <template> Tag

HTML <template> tag is a mechanism for holding some HTML or client-side content hidden from the user when the page loads. The browser evaluates the content of the <template> tag when loading the page to ensure that it is valid; however, the contents are not shown. The template's content will not be displayed unless it is not active using JavaScript.

If we want to use same content multiple times in our HTML document without any changes then we can use <template> tag.

The <template> tag can be used anywhere inside an HTML document, such as in <head>, <body>, <frameset>, or <table> elements.

Syntax

<template>.....</template>

Attribute

HTML template tag supports Global and Event attributes of HTML. A specific attribtes is accepted as well which is listed below.

Examples of HTML template Tag

Bellow examples will illsutarte the usage of template tag, when, where and how to use it to hide element behind a trigger point.

Hiding content using template tag

We can hide any content inside of template tag when the browser will load the page and use a button as trigger point to render that element latter. In the following example, we are using the <template> tag to hold the content when the page loads, later on we are displaying the hidden content by using JavaScript.

<!DOCTYPE html>
<html>
<body>
   <h1>The template Element</h1>
   <p>
       When you click the button below, JavaScript is activated,
       and hidden content will become visible!
   </p>
   <button onclick="showContent()">Show hidden content</button>
   <template>
      <h2>Tutorialspoint</h2>
      <p>Tutorialspoint: 
        <q>
            is an EdTech organisation that provides courses 
            related to CSE and so many tutorials and DSA solutions.
        <q>
      </p>
      <p>Easy to learn!</p>
   </template>
   <script>
      function showContent() {
         let temp = document.getElementsByTagName("template")[0];
         let clon = temp.content.cloneNode(true);
         document.body.appendChild(clon);
      }
   </script>
</body>
</html>

Hiding image using template tag

We can hide any content inside of template tag when the browser will load the page and use a button as trigger point to render that element latter. Considering the following example, we are using the <template> tag to hide the image when the page loads, later on we are displaying the hidden content by using JavaScript.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Template tag</title>
</head>
<body>
   <h2>Example of template tag</h2>
   <button onclick="clickMe()">Click Me</button>
   <br>
   <template id="mytemplate">
      <img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="logo">
      <script>
      alert("Thank you for choosing template. Click OK for tutorialspoint Logo.")
      </script>
   </template>
   <script>
      function clickMe() {
         var x = document.getElementsByTagName("template")[0];
         var clon = x.content.cloneNode(true);
         document.body.appendChild(clon);
      }
   </script>
</body>
</html>

Supported Browsers

Tag
template	Yes 26.0	Yes 13.0	Yes 22.0	Yes 8.0	Yes 15.0

html_tags_reference.htm