The <template> tag is an HTML5 element that stores HTML code fragments that are not displayed immediately when a page is loaded. This element can be duplicated and inserted into an HTML document. The content of the <template> is hidden from clients as it is stored on the client-side. Templates are not rendered in the browser until you activate them using JavaScript. JavaScript is used to get the content from a template and add it to the web page.
Creating a template is simple. It is done by specifying the <template> element and giving it an appropriate ID.
<template id="content-wrapper">
<div>render this content</button>
</template>
Benefits and downsides of using the <template> element
On the plus side:
It supports both the event and global attributes in HTML.
It helps developers create reusable markups.
It supports so many browsers.
It can be used in a frontend framework.
It improves site speed and performance. As it only runs when activated.
On the minus side:
It relies solely on Javascript. Users with Javascript disabled from their browser won’t be able to see content displayed using the template element.
Accessibility issues; it affects some older screen-readers.