A template holds markup that is parsed but not rendered as live page content until a script inserts a clone.
Make this comfortable
HTML template: stage inert markup before a script clones it
Use it for a real task
A receipt interface may need to add rows after a response arrives. The template stores the row shape without showing a fake record on first render. Its placeholders are not data: a script must clone the fragment, fill text safely, and append it to a real list. If scripting fails, the page still needs a useful empty state or server-rendered records.
<ul id="receipt-results">
<li>No receipts loaded yet.</li>
</ul>
<template id="receipt-row-template">
<li><span class="receipt-id"></span> — <span class="receipt-state"></span></li>
</template>What the markup guarantees
The template does not loop, fetch, or escape values by itself. When code fills it, assign untrusted strings as text rather than interpreting them as HTML. Remove the empty-state row only after actual results are ready.
Cost and limits
An unused template is inexpensive markup but adds bytes. Inserted records create DOM nodes proportional to results, so paginate or virtualize very large lists only when measurements justify that complexity.
Common Mistakes
- Do not expect template contents to appear automatically.
- Do not insert server text with innerHTML without a trusted parser and sanitization policy.
- Do not remove fallback content before data successfully arrives.
Connected lessons
html
accessibility