HTML <template> Tag
Description
The HTML <template>
tag is a versatile element used to define client-side content that should not be rendered when the page loads but can be instantiated and displayed later through JavaScript. It serves as a container for holding HTML content, such as elements, text, or other markup, which can then be cloned and inserted into the document as needed. This feature is particularly useful for creating reusable components, dynamic content generation, or improving page load performance by deferring the rendering of certain elements until they are required, reducing initial page rendering time. The content within a <template>
tag remains inert until explicitly activated, making it a valuable tool for modern web development.
Properties
- Permitted Parents
- Any element that accepts metadata content, phrasing content, or script-supporting elements. Also allowed as a child of a <colgroup> element that does not have a span attribute.
- Content
- No restrictions
- Start/End Tags
- Start tag: required, End tag: required
Example
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
Attributes
None
Global Attributes
The <template>
tag also supports the Global Attributes in HTML5
Event Attributes
None
Browser Support
The following table will show you the current browser support for the HTML <template>
tag.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
13 | 26 | 22 | 15 | 8 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
26 | 22 | 14 | 8 | 1.5 | 4.4 |
Last updated by CSSPortal on: 30th September 2023