Reusable and Interactive Markup

Template Fragment

Store Markup for Later

A notification card is placed inside a template so the browser parses it but does not render it until code reuses the fragment.

Program

The template element is useful when a page needs reusable markup. Its contents are part of the document, but they stay inert and hidden.

template_fragment.html
Visuals: captured from real browser rendering
<template id="notice-template">
  <article class="notice"><h2>Maintenance</h2><p>Starts at 20:00.</p></article>
</template>
<section id="notices"></section>

  1. Create an inert template container.

    A template state panel appears, but no card is rendered.
    Template content is not painted as ordinary body content.

  2. Name the template for reuse.

    The stored fragment is addressable as notice-template.
    An id lets later code find the template element.

  3. Store a notification card inside the template.

    The replay shows the card as stored template content, not visible page output.
    The article exists inside the template fragment and remains inert.

  4. Close the reusable fragment.

    The reusable notice fragment is complete.
    Closing template finishes the hidden markup bundle.

  5. Add a target section for cloned notices.

    The page has an empty Notices target while the template remains stored.
    The section is where future clones can be inserted without changing the template itself.
template A template stores markup that is parsed but not rendered immediately.
fragment The template content can be cloned as a reusable document fragment.