What are template literals in HTML using <template> tag?

The <template> tag defines reusable HTML that isn’t rendered until you activate it via

JavaScript.

Example:

<template id="card-template">

<div class="card">

<h3></h3>

<p></p>

</div>

</template>

<script>

const tmpl = document.getElementById("card-template");

const clone = tmpl.content.cloneNode(true);

clone.querySelector("h3").textContent = "HTML Tips";

clone.querySelector("p").textContent = "Use semantic tags for SEO.";

document.body.appendChild(clone);

</script>

Key Takeaway:

<template> = invisible HTML blueprint ready to be cloned dynamically.