Creating HTML Templates
📅
What are HTML Templates?
The <template> element allows you to create HTML fragments that are not rendered until cloned.
Basic Syntax
<template id="user-template">
<div class="user-card">
<h3>User Name</h3>
<p>Profile description</p>
</div>
</template>
Key Features
- Not rendered in DOM until activated
- Content is inert: scripts don't run, images don't load
- Can be placed anywhere in
<body>
Usage Example
// Clone and insert template
const template = document.getElementById('user-template');
const clone = template.content.cloneNode(true); // true = deep clone
document.body.appendChild(clone);
Browser Support Check
if ('content' in document.createElement('template')) {
// Browser supports templates
} else {
// Polyfill or fallback
}