HTML - <template> Tag

Quiz

Introduction to <template> Tag

The HTML <template> tag is used to hold HTML or client-side content hidden from the user when the page loads. The browser evaluates the content of the template tag to ensure it is valid, but the contents are not displayed. The template's content will only be shown if activated using JavaScript.

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

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

Syntax

Following is the syntax of <template> tag −

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

Attributes

The HTML <template> tag supports Global and Event attributes.

Example: Hiding Content

We can hide any content inside the browser will loads the page and use a button as a trigger to render that element later. In the following example, we use the <template> tag to hold the content when the page loads, and later display the hidden content 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>

Example: Hiding Image

We can hide any content inside of template tag when the browser loads the page and use a button as a trigger to render that element later. In the following example, we use the <template> tag to hide the image when the page loads, and later display the hidden content 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

Print Page