HTML <template> Tag
HTML
The <template> tag is used to retain some HTML that will be hidden when the page loads.
HTML <template> Tag
➔ The <template> element is a process of retaining HTML that is not rendered as soon as a page is loaded.
➔ The <template> tag is useful when content fragment is stored for subsequent use in the document.
➔ The parser does process the contents of the <template> element while loading the page, but it can be rendered during runtime using JavaScript.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML template tag Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<style>
button {
padding: 10px 20px;
}
</style>
</head>
<body>
<h3>HTML template tag Example</h3>
<template id="paragraph-template">
<p>My paragraph</p>
<style>
p {
padding: 10px 20px;
background-color: #405060;
color: #fff;
}
</style>
</template>
<button>Show Paragraph</button>
<script>
let btn = document.querySelector("button");
btn.addEventListener("click", myfunction);
function myfunction() {
let template = document.getElementById("paragraph-template");
let tContent = template.content;
document.body.appendChild(tContent);
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example (image in template)
<!DOCTYPE html>
<html>
<head>
<title>HTML template tag Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<style>
.card {
float: left;
}
</style>
</head>
<body>
<h3>HTML template tag Example</h3>
<template id="my-template">
<h1>
<slot name="heading"></slot>
</h1>
<div class="imgdiv">
<slot name="pic1"></slot>
<p>
<slot name="name1"></slot>
</p>
<p>
<slot name="desc1"></slot>
</p>
</div>
<div class="imgdiv">
<slot name="pic2"></slot>
<p>
<slot name="name2"></slot>
</p>
<p>
<slot name="desc2"></slot>
</p>
</div>
<style>
h1 {
font-size: 1.3em;
color: #123456;
background-color: #cafd88;
padding: 2px 10px;
}
p {
color: #000;
background-color: #7799ff;
margin: 2px;
padding: 5px 10px;
width: 230px;
}
.imgdiv {
width: 250px;
margin: 2px 5px;
border: 1px solid #e5e5e5;
float: left;
}
</style>
</template>
<div class="card">
<span slot="heading">Flowers:</span>
<span slot="pic1"><img src="./resources/images/flower-rose.png" alt="flower"></span>
<span slot="name1">Name: Rose</span>
<span slot="desc1">Origin:USA</span>
<span slot="pic2"><img src="./resources/images/flower-hibiscus.png" alt="flower"></span>
<span slot="name2">Name: Hibiscus</span>
<span slot="desc2">Origin: Germany</span>
</div>
<div class="card">
<span slot="heading">Fruits:</span>
<span slot="pic1"><img src="./resources/images/fruits-blackberry.png" alt="fruits"></span>
<span slot="name1">Name: Balckberry</span>
<span slot="desc1">Origin: Mexico</span>
<span slot="pic2"><img src="./resources/images/fruits-apple.png" alt="fruits"></span>
<span slot="name2">Name: Apple</span>
<span slot="desc2">Origin: China</span>
</div>
<script>
var templateContent = document.querySelector('template').content;
var divs = document.querySelectorAll('div');
divs.forEach(function (div) {
div.attachShadow({ mode: 'open' }).appendChild(
templateContent.cloneNode(true))
});
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.