Home HTML Reference <template>

<template>

tag HTML5

Holds client-side content not rendered at load time, but instantiated via JavaScript.

Syntax

<template id="myTemplate"> ... </template>

Example

html

<template id="card-template">
    <div class="card">
        <h2 class="card-title"></h2>
        <p class="card-body"></p>
    </div>
</template>

<script>
    const tmpl = document.getElementById('card-template');
    const clone = tmpl.content.cloneNode(true);
    clone.querySelector('.card-title').textContent = 'Hello!';
    document.body.appendChild(clone);
</script>

data-* attributes