Skip to content
Related Articles

Related Articles

Improve Article

HTML template Tag

  • Difficulty Level : Basic
  • Last Updated : 28 Jun, 2021

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.
Example 1: 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

Example 2: This example uses 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: 
Before Clicking the button: 
 

template2

After Clicking the button: 
 

template tag

Supported Browsers: 

  • Google Chrome 26.0
  • Internet Explorer 13.0
  • Firefox 22.0
  • Safari 9.0
  • Opera 15.0

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :