HTML Referenzhandbuch

HTML-Tag-Übersicht

HTML: <template> Tag

The HTML content template ( <template>) element is a mechanism for saving client-side content, which is not rendered when loading the page but can be instantiated at runtime using JavaScript. Consider the 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 See If ‹/›

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.

When you need to use HTML code repeatedly, please use the <template> tag, but only use it 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 See If ‹/›

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