Document Templates (<template>)
What are HTML Templates?
Imagine a baker who has a cookie cutter mold. The mold is sitting in the cupboard—it isn't a cookie itself, and you can't eat it. But when the baker presses it into dough, it instantly produces a cookie.In HTML, the <template> element is a cookie cutter mold. It stores HTML snippets that are parsed by the browser but not rendered on the screen when the page loads. The content is hidden until you use JavaScript to clone it and inject it onto the page.
Why does it matter?
Templates are key to building modern interactive pages. Instead of writing long HTML strings inside JavaScript files (which is messy and hard to maintain), you can write clean HTML structures inside<template> tags in your document, keeping your layout logic organized.
How to write it
<template id="card-layout">
<h3>Card Title</h3>
</template>
<template> (Hidden)
Common Mistakes
<template> tags automatically. If you want content to show on load, do not put it in a template.Quick Reference
<template id="id"> — Container for hidden, reusable HTML.Your Task
Create a `<template>` element with `id="card-layout"`. Inside it, write a single `<h3>` tag containing 'Card Title'.
index.html
Type code above to start the lesson.
Live Preview