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.