HTML 5 <template> Tag

The HTML <template> tag allows you to declare fragments HTML fragments that can be cloned and inserted into the document by script.

The contents of the <template> tag are not rendered upon page load. Rather, they are cloned and inserted into the DOM when they need to be used - which could be based on an event such as user input.

The basic idea behind the <template> element is that it can be used over and over again. You can use the template as is, or you could add to it, for example, data from a database. Therefore it could be used to populate a large table with data, or a select list with new options perhaps based on user input.

Until the <template> element is used, it is not part of the document. Therefore, you can't reference it through the DOM, for example, using document.getElementById or similar code. Also, until the <template> element is used, none of its contents are downloaded. So if the <template> contains say, an image, that image won't be downloaded until the <template> is cloned and inserted into the document.

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Global Attributes

The following attributes are standard across all HTML 5 tags.

• accesskey
• class
• contenteditable
• contextmenu
• dir
• draggable
• dropzone
• hidden
• id
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• spellcheck
• style
• tabindex
• title
• translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

• onabort
• oncancel
• onblur
• oncanplay
• oncanplaythrough
• onchange
• onclick
• oncontextmenu
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformchange
• onforminput
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onmousewheel
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreadystatechange
• onscroll
• onseeked
• onseeking
• onselect
• onshow
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.