HTML Tags

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:

HTML / XHTML: <template> ... </template>

The example below shows the <template> tag in action.

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

Browsers Icon

Basic Support—

  • Firefox 22+
  • Google Chrome 26+
  • Edge 13+
  • Apple Safari 8+
  • Opera 15+

Further Reading

See tutorial on: HTML Images.

Related tags: <img>, <source>.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties