HTML template Tag
Last Updated :
01 Aug, 2022
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 >
< 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 >
< 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 >
< 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 >
|
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 >
< template >
< h2 >GeeksforGeeks: A computer science portal</ h2 >
< img src =
< br >
Content Writer:
< input type = "text"
placeholder = "author name" >
</ template >
< 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
Share your thoughts in the comments
Please Login to comment...