<template> tag is used to declare fragments of HTML that can be cloned and inserted into the document by script. The <template> tag has the following syntax:
<template id="templateId">
<!-- Fragment of HTML code goes here -->
</template>
The following example shows how to use the <template> tag to declare a fragment of HTML code:
<!DOCTYPE html>
<html>
<head>
<title>HTML template tag example</title>
</head>
<body>
<template id="tpl">
<h1>Template Example</h1>
<p>This is an example of the template tag</p>
</template>
<script>
var template = document.querySelector('#tpl');
var clone = document.importNode(template.content, true);
document.body.appendChild(clone);
</script>
</body>
</html>
The <template> tag consists of two parts:
The content of a <template> element is not rendered by default - it remains inert until activated by a script. To clone and activate a template, the content needs to be imported into the main document using JavaScript.
The main use of the <template> tag is to define reusable fragments of HTML code that can be dynamically inserted into a webpage. This can help to reduce duplication of code and simplify maintenance.
The <template> tag can be used to create custom elements and shadow DOM, which are powerful features for creating web components.
The following are some important points to consider while using the <template> tag:
<template> tag is inert by default and needs to be cloned and activated using JavaScript.<template> tag is used to uniquely identify the template and should be unique within the document.<template> tag is not rendered, and cannot be accessed by CSS or JavaScript (until it is cloned and activated).<template> tag is a semantic tag that improves the structure and accessibility of an HTML document.The HTML <template> tag is a powerful mechanism for declaring fragments of HTML code that can be dynamically inserted into a webpage. It helps to reduce duplication of code, simplify maintenance, and improve the structure and accessibility of an HTML document.