Тег <template>

Тег <template> (укр. — “шаблон”) в HTML використовується для зберігання фрагментів HTML-коду, які не відображаються на сторінці під час завантаження. Контент всередині <template> не рендериться браузером до тих пір, поки він не буде явно вставлений у DOM за допомогою JavaScript.

Цей тег дозволяє створювати заготовки динамічного контенту, які можуть багаторазово використовуватися для генерації інтерфейсу.

Атрибути

Специфічні атрибути

Тег <template> не має специфічних (унікальних) атрибутів.

Глобальні атрибути

Тег <template> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<template id="user-card-template">
    <!-- Шаблон контенту -->
</template>
  • class —для CSS-стилізації (зазвичай не використовується напряму, бо елемент невидимий). Наприклад:
<template class="template-block">
    <!-- Контент шаблону -->
</template>
  • style — для інлайн-стилів (практично не застосовується). Наприклад:
<template style="display: none;">
    <!-- Контент -->
</template>
  • lang — мова контенту всередині шаблону. Наприклад:
<template lang="uk">
    <!-- Контент -->
</template>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання template</title>
    <style>
        .user-card {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>

<h2>Динамічне створення карток користувачів:</h2>

<template id="user-card-template">
    <div class="user-card">
        <h3 class="name"></h3>
        <p class="email"></p>
    </div>
</template>

<div id="user-container"></div>

<script>
    const users = [
        { name: 'Іван', email: '[email protected]' },
        { name: 'Олена', email: '[email protected]' }
    ];

    const container = document.getElementById('user-container');
    const template = document.getElementById('user-card-template');

    users.forEach(user => {
        const clone = template.content.cloneNode(true);
        clone.querySelector('.name').textContent = user.name;
        clone.querySelector('.email').textContent = user.email;
        container.appendChild(clone);
    });
</script>

</body>
</html>

Додаткові моменти

  • Контент всередині <template> не рендериться та не активний у DOM до його явного вставлення.).
  • Зручний для динамічної генерації контенту за допомогою JavaScript.
  • Всередині може містити будь-який валідний HTML-код.
  • Часто використовується в сучасних UI-фреймворках та при створенні Web Components.
  • Забезпечує кращу продуктивність — браузер не парсить і не обробляє контент всередині до вставлення.
  • Може бути вкладеним у будь-яку частину документа.
  • Підтримується всіма сучасними браузерами.