HTML

template Tag in HTML

Example

Use <template> to hold some content that will be hidden when the page loads. Use JavaScript to display it:  
				
					  <head>
    <title>Title of the document</title>
  </head>
  <body data-rsssl=1>
    <h1>This is a heading.</h1>
    <p>
     <q>If you tell the truth, you don't have to remember anything.</q>
      ― Mark Twain
    </p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4753428124481028"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-4753428124481028"
     data-ad-slot="5698767513"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

    <template>
      <h2>This is a second heading.</h2>
      <p>
        “I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.”
        ― Marilyn Monroe
      </p>
    </template>
  </body>
				
			

Definition and Usage

The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.

The content inside <template> can be rendered later with a JavaScript.

You can use the <template> tag if you have some 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.

Global Attributes

The <template> tag supports the Global Attributes in HTML.

Related Articles