HTML - <template> Tag

The HTML <template> tag is a mechanism for holding some HTML or client-side content hidden from the user when the page loads.

The content contained within <template> can be displayed later during runtime using JavaScript. 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>

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

Syntax

Following is the syntax of <template> tag −

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

Example

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>

When we execute the above script, it will generate an output consisting of the text along with a button on the webpage. when the user tries to click on the button the event gets triggered.

Example

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>

On executing the above script, the output window will pop up, displaying the text and click button on the webpage. when the user tries to click the button the event gets triggered and displays the image.

html_tags_reference.htm
Advertisements