HTML5 <template> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <template> element is used to define fragments of HTML that is not to be rendered immediately when a page is loaded but can be cloned and inserted in the document by JavaScript.
The following table summarizes the usages context and the version history of this tag.
| Placement: | In a rendering, the <template> element represents nothing |
|---|---|
| Content: | Block, inline, and text |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | New in HTML5 |
Syntax
The basic syntax of the <template> tag is given with:
The example below shows the <template> tag in action.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML template Tag</title>
</head>
<body>
<button type="button" onclick="showStudents();">Show Students</button>
<table id="studentsTable">
<thead>
<tr>
<th>Roll No.</th>
<th>Student Name</th>
</tr>
<thead>
<tbody>
<!-- Content will be inserted here using template dynamically -->
<tbody>
</table>
<template id="studentRow">
<tr>
<td></td>
<td></td>
</tr>
</template>
<script>
/* Test if the browser supports the HTML template element by checking
the presence of the template element's content attribute */
if("content" in document.createElement("template")) {
// Sample array of students
var students = ["Alice", "Peter", "Harry", "John", "Clark"];
function showStudents() {
// Selecting the elements
var tbody = document.querySelector("#studentsTable tbody");
var template = document.querySelector("#studentRow");
// Loop through item in the students array
for(i = 0; i < students.length; i++) {
// Clone the new row from template
var clone = template.content.cloneNode(true);
var td = clone.querySelectorAll("td");
// Add data to table cell from the array
td[0].textContent = i + 1;
td[1].textContent = students[i];
// Append the new row into table body
tbody.appendChild(clone);
}
}
} else {
alert("Your browser does not support template element!");
}
</script>
</body>
</html>Tip: Contents of the <template> element are not render immediately when a page is loaded, but can be rendered later using JavaScript. You can use the <template> tag where you need to use some HTML code over and over again, for example populating table with rows.
Tag-Specific Attributes
The <template> tag doesn't have any specific attribute.
Global Attributes
Like all other HTML tags, the <template> tag supports the global attributes in HTML5.
Event Attributes
The <template> tag also supports the event attributes in HTML5.
Browser Compatibility
The <template> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Images.
