Open In App

HTML template Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The <template> tag in HTML is used to store the HTML code fragments, which can be cloned and inserted in an HTML document. The content of the tag is hidden from clients being stored on the client-side. It is inserted until activated using JavaScript. Use JavaScript to get the content from a template, and add it to the web page.

Syntax:

<template> Contents </template>

Note: The <template> tag is new in HTML 5.

Attributes: This tag supports the global attributes in HTML.

Example 1: In this example, we have an unordered list of the courses that we have hidden to display using the <template> tag in HTML.

HTML




<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML template tag</h3>
     
<p>
      Content inside a template tag will
      be hidden from the client.
    </p>
 
 
 
     
    <!-- Html script tag starts here -->
    <template>
        <h2>GeeksforGeeks: A computer science portal</h2>
        <h4>GeeksforGeeks Offline Courses</h4>
        <ul>
            <li>DSA</li>
            <li>Placement & Interview Preparation</li>
            <li>Web Development</li>
            <li>Algorithms & basic programming</li>
        </ul>
    </template>
    <!-- Html template tag ends here -->
     
<p>End of the example of template tag</p>
 
</body>
</html>


 Output:

HTML template tag

Example 2: This example uses a template tag, and it hides the content within the template tag.

HTML




<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML template tag</h3>
     
<p>
      Content inside a template tag
      is hidden from the client.
    </p>
 
 
 
     
    <!-- html script tag starts here -->
    <template>
        <h2>GeeksforGeeks: A computer science portal</h2>
        <img src=
            Content Writer:
        <input type="text"
               placeholder="author name">
    </template>
    <!-- html template tag ends here -->
     
     
<p>End of the example of template tag</p>
 
 
 
</body>
</html>


Output:

template1

HTML template tag

Example 3: This example illustrates the uses of JavaScript to display the template tag content.

HTML




<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML template tag</h3>
     
<p>
      Click the button to get the content from a template,
      and display it in the web page.
    </p>
 
 
 
    <button onclick="myGeeks()"> Show content </button>
     
    <!-- Html template tag starts here -->
    <template>
        <h2>GeeksforGeeks: A computer science portal</h2>
        <img src=
        <br>
        Content Writer:
        <input type="text"
               placeholder="author name">
    </template>
    <!-- Html template tag ends here -->
     
    <!-- Script to display the content of template tag -->
    <script>
    function myGeeks() {
        var t = document.getElementsByTagName("template")[0];
        var clone = t.content.cloneNode(true);
        document.body.appendChild(clone);
    }
    </script>
</body>
</html>


Output:

HTML template tag

Supported Browsers: 

  • Google Chrome 26.0 & above
  • Microsoft Edge 13.0 & above
  • Firefox 22.0 & above
  • Safari 8.0 & above
  • Opera 15.0 & above


Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads