HTML <template> Tag

The template element serves as a container for HTML content that is concealed from the user when the page loads.

The material included within <template> can be rendered later using JavaScript.

You can use the <template> element if you have any HTML code that you wish to reuse, but only if you ask for it. To do this without the <template> element, you must write the HTML code in JavaScript to prevent the browser from rendering it.

Syntax

<template> Contents here... </template>

Example

<!DOCTYPE html>
<html>
<body>

<p>Click the button below to reveal the template component hidden content.</p>

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Web</h2>
  <img src="https://webtutor.dev/images/computer.jpg" width="250" height="150">
</template>

<script>
  function showContent() {
	var template = document.getElementsByTagName("template")[0];
	var clone = template.content.cloneNode(true);
	document.body.appendChild(clone);
  }
</script>

</body>
</html>

Preview

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
<template>	26.0	22.0	8.0	13.0	15.0

<td>

HTML <template> Tag

Syntax

Example

Supported Browsers

Links

Tutorials

Connect with us