HTML template Tag - GeeksforGeeks

15 Dec, 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.
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="https://media.geeksforgeeks.org/wp-content/uploads/20210922100958/gfg3-300x300.png">            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:
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="https://media.geeksforgeeks.org/wp-content/uploads/20210922100958/gfg3-300x300.png">        <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 93.0 & above
Microsoft Edge 93.0
Firefox 92.0 & above
Safari 14.1
Opera 79.0
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
arorakashish0911
shubhamyadav4
bhaskargeeksforgeeks
HTML-Tags
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
REST API (Introduction)
Design a web page using HTML and CSS
Angular File Upload
Form validation using jQuery
How to auto-resize an image to fit a div container using CSS?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?