HTML template Tag

HTML <template>Tag: The HTML<template> tag holds the content hidden from the client. The <template> tag in HTML is used to store the HTML code fragments, which can be cloned and inserted in an HTML document. Use the JavaScript to get the content from a template, and add it to the web page.

HTML<template>Tag

This template tag supports both the global and the event attributes. Use the <template> tag when you have HTML code you want to use over and over again, but not until you ask for it. To do this without the <template> tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.

Syntax: <template> Text </template>



Browser compatibility

The HTML<template> tag is supported by different types of browsers.

  • Chrome-26.0
  • Firefox-22.0
  • Opera-15.0
  • Safari-9
  • InternetExplorer-13.0

Example:

<!DOCTYPE html>
<html>
<body>
<h1>The template Tag</h1>
<p>Content inside a template tag is hidden from the client.</p>
<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>
</body>
</html>

Output:

The template Tag

Content inside a template tag is hidden from the client.

A later example will show you how to use JavaScript to display the template content.