Skip to content
Related Articles

Related Articles

HTML | template Tag
  • Difficulty Level : Basic
  • Last Updated : 30 Oct, 2020

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 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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :