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
Edge Chrome Firefox Opera Safari
132622158
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
26221481.54.4

Last updated by CSSPortal on: 30th September 2023