HTML | template Tag

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 inert 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 use template tag and it hide the content within template tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
template1

Example 2: This example use JavaScript to display the template tag content.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head
    <title
        HTML template tag 
    </title
</head
  
<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>
      
    <template>
        <h2>
            GeeksforGeeks: A computer science portal
        </h2>
      
        <img src=
          
        <br>
          
        Content Writer:<input type="text" placeholder="author name">
    </template>
      
    <!-- 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>                    

chevron_right


Output:
Before Clicking the button:
template2
After Clicking the button:
template tag

Supported Browsers: The browser supported by <template> tag are listed below:

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.