HTML Reference Manual

HTML Tag Reference

HTML: <template> tag

The HTML content template ( <template>) element is a mechanism for saving client-side content that is not rendered when the page is loaded but can be instantiated at runtime using JavaScript. Consider a template as a content fragment that can be stored in the document for later use. Although the parser does indeed process the content of the <template> element when loading the page, this is only to ensure that the content is valid; the element content is not rendered.

Online examples

Demonstrate how to use the template tag:

Example

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML template tag usage (Basic Tutorial Website oldtoolbag.com)</p>/</title>
</</head>
<body>
<p>Content inside a template tag is hidden from the client.</p>/</button>
<template>
　　<h2>Views</p>/h2>
　　<img src="views.png">
</template>
<p>A later example will show you how to use JavaScript to display the template content.</p>/</button>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the <template> tag.

Definition and Usage

The <template> tag hides its content from the client.

The content inside the <template> tag will not be rendered.

You can later use JavaScript to make the content visible and render it.

Use the <template> tag when you need to use HTML code repeatedly. However, use it only when you need to. To perform this operation without the <template> tag, you must use JavaScript to create HTML code to prevent the browser from rendering the code.

More online examples

Example

<!DOCTYPE html>
<html>
<body>
<h1>HTML template tag usage (Basic Tutorial Website oldtoolbag.com)</p>/h1>
<p>Click the button to get the content from a template, and display it in the web page.</p>/</button>
<button onclick="showContent()">Show content</button>/button>
<template>
　　<h2>views</h2>
　　<img src="views.png" width="300" height="204">
</template>
<script>
function showContent() {
　　var temp = document.getElementsByTagName("template")[0];
　　var clon = temp.content.cloneNode(true);
　　document.body.appendChild(clon);
}
</script>
</body>
</html>

Test to see ‹/›

HTML 4.01and HTML5differences between

<template> tag is HTML5new tags in

Global attributes

Support for <template> tag Global attributes of HTML.

Event attributes

Support for <template> tag HTML event attributes.

HTML: <wbr> tag