HTML-тег <template>

Характеристики

• Тип: метаданные
• Назначение: Определяет фрагмент HTML, который не отображается при загрузке страницы, но может быть использован в JavaScript.
• Родители: Любые элементы, допускающие потоковый контент.
• Потомки: Любой допустимый HTML-контент.
• Глобальные атрибуты: все
• Атрибуты событий: нет

Пример использования

<template id="myTemplate">
  <div class="item">
    <h2></h2>
    <p></p>
  </div>
</template>

Использование в JavaScript

// Использование шаблона для создания контента
const template = document.getElementById('myTemplate');
const clone = template.content.cloneNode(true);
clone.querySelector('h2').textContent = 'Заголовок';
clone.querySelector('p').textContent = 'Описание';
document.body.appendChild(clone);

Рекомендации по обеспечению доступности (a11y)

• Содержимое <template> не объявляется в доступной DOM и недоступно для пользователей до его рендеринга.
• Убедитесь, что динамически добавленный контент доступен и семантически корректен.
• Избегайте размещения важного контента внутри <template> без планов его использования.

Полезные ссылки

• Статья на Doka.guide о <template>