Introducing the new HTML5 template Tag

Share this article

Modern web applications use DOM manipulation to dynamically change areas of the page or insert values. A typical example is a table of figures; the initial page could return HTML column headers then initialize an Ajax request which returns several data records. The data is then appended to the table — but how?
The developer has two choices:
  1. JavaScript is used to build HTML row strings or DOM fragments which are appended to the table. That seems easy until you need to make a change and must hunt around your JavaScript for the associated HTML code. To make life simpler, developers often return whole HTML string fragments from the Ajax call, but that makes the payload more verbose and opens the potential for Cross-Site Scripting attacks.
  2. Alternatively, you create an empty first row in the HTML page which is used as a template for all other rows. That should be easier to maintain, but you’ll need to remove it from the DOM or style it with display:none to ensure it doesn’t appear.
Neither solution is particularly elegant. Fortunately, the W3C has introduced a new template tag which provides a mechanism to define HTML markup fragments as prototypes. (Perhaps it will also appease those upset by the demise of the hgroup element!) In essence, a template can be used to insert fragments of HTML code into your page, e.g.
<template id="mytablerow">
<tr>
<td class="record"></td>
<td></td>
<td></td>
</tr>
</template>
The template code can be defined almost anywhere — the head, body
or even a frameset. However:
  1. templates will not display
  2. templates are not considered to be part of the document, i.e. using document.getElementById(“mytablerow”) will not return child nodes
  3. templates are inactive until used, i.e. enclosed images will not download, media will not play, scripts will not run, etc.

Using templates

To use a template, it must be cloned and inserted into the DOM. For example, assuming the following HTML:
<table id="mytable">
<thead>
<tr>
<td>ID</td>
<td>name</td>
<td>twitter</td>
</tr>
</thead>
<tbody>

<!-- rows to be appended here -->

</tbody>
</table>

<!-- row template -->
<template id="mytablerow">
<tr>
<td class="record"></td>
<td></td>
<td></td>
</tr>
</template>
We can clone a new row in JavaScript:
// fetch tbody and row template
var	t = document.querySelector("#mytable tbody"),
	row = document.getElementById("mytablerow");

// modify row data
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "SitePoint";
td[2].textContent = "sitepointdotcom";

// clone row and insert into table
t.appendChild(row.content.cloneNode(true));
The important question: can we use template tags? Probably not just yet. It’s supported in the latest version of Chrome and Firefox nightlies. Opera will support the tag when it switches to Blink
. No word from the IE and Safari teams yet, but a template shim has been demonstrated on JSfiddle should you wish to support all browsers. Personally, I think the template tag is a great idea. It’s simple and standardizes templating techniques for HTML5 developers.

Frequently Asked Questions about HTML5 Template Tag

What is the purpose of the HTML5 template tag?

The HTML5 template tag is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript. It’s like a storage space you can create in your HTML, where you can put parts of your HTML code that you might use and instantiate later on. It’s a way to keep your HTML clean and organized, and it’s particularly useful when you want to create HTML elements dynamically.

How does the HTML5 template tag work?

The HTML5 template tag works by allowing you to declare fragments of HTML that can be cloned and inserted in the document by JavaScript. You can put any kind of content you’d like inside a template tag, and it won’t affect the rest of your page. It will remain inert until a script accesses it and uses it to add content to the document.

Can I use JavaScript with the HTML5 template tag?

Yes, you can use JavaScript with the HTML5 template tag. In fact, the template tag is designed to work with JavaScript. You can use JavaScript to access the content inside a template tag and clone it, modify it, or insert it elsewhere in the document. This is particularly useful for creating dynamic content on your web pages.

Is the HTML5 template tag supported by all browsers?

The HTML5 template tag is widely supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported by Internet Explorer. If you need to support Internet Explorer, you may need to use a polyfill or an alternative method to achieve similar functionality.

How do I use the HTML5 template tag in my HTML document?

To use the HTML5 template tag in your HTML document, you simply need to add the

Can I nest HTML5 template tags?

Yes, you can nest HTML5 template tags. This means you can put a template tag inside another template tag. This can be useful if you want to organize your templates in a certain way, or if you want to create more complex templates.

Can I use CSS with the HTML5 template tag?

Yes, you can use CSS with the HTML5 template tag. Any CSS you include inside a template tag will apply to the content inside the template. However, this CSS will not affect the rest of your page until the template content is added to the document using JavaScript.

Can I use the HTML5 template tag for creating reusable components?

Yes, the HTML5 template tag is ideal for creating reusable components. You can define a template for a component once, and then use it multiple times throughout your document. This can help to reduce code duplication and make your HTML easier to maintain.

Can I use the HTML5 template tag with other HTML5 elements?

Yes, you can use the HTML5 template tag with any other HTML5 elements. This includes elements like

,
,

Can I use the HTML5 template tag for server-side rendering?

The HTML5 template tag is primarily designed for client-side rendering. However, it is possible to use it for server-side rendering as well. This would involve using a server-side language like PHP or Node.js to generate the template content, and then sending it to the client to be rendered.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

ajaxDOMHTML5 Dev CenterHTML5 Tutorials & Articles
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week