Тег <template>


Описание

Тег <template> служит контейнером для HTML-шаблонов, которые не отображаются при загрузке страницы, но могут быть клонированы и вставлены в документ с помощью JavaScript. Это механизм для хранения повторно используемых фрагментов разметки.

Базовый синтаксис:
<template id="user-card"> <div class="card"> <h3></h3> <p class="email"></p> </div> </template>

Ключевые особенности:

  • Содержимое не отображается до активации JavaScript
  • Не вызывает загрузку внешних ресурсов (изображения, скрипты)
  • Доступен через API document.querySelector('template').content
  • Может содержать любые валидные HTML-элементы
  • Поддерживается всеми современными браузерами
Пример использования с JavaScript:
<template id="news-item"> <article class="news"> <h2></h2> <time datetime=""></time> <p></p> </article> </template> <div id="news-container"></div> <script> const template = document.getElementById('news-item'); const content = template.content.cloneNode(true); content.querySelector('h2').textContent = 'Новый стандарт HTML6'; content.querySelector('time').textContent = '15 мая 2023'; content.querySelector('time').setAttribute('datetime', '2023-05-15'); content.querySelector('p').textContent = 'W3C анонсировал...'; document.getElementById('news-container').appendChild(content); </script>

Стилизация шаблонов:

<style> /* Стили для шаблона (применятся после вставки) */ .user-card { border: 1px solid #ddd; padding: 15px; margin: 10px 0; } </style> <template id="user-template"> <div class="user-card"> <h3>Имя пользователя</h3> <p>Описание профиля</p> </div> </template>

Рекомендации по использованию:

  • Используйте для динамически генерируемого контента
  • Храните сложные фрагменты разметки
  • Избегайте вставки активных элементов (скриптов, стилей)
  • Для веб-компонентов сочетайте с customElements.define()
  • Оптимизируйте производительность при массовой вставке

Тег <template> предоставляет мощный механизм для работы с клиентскими шаблонами, позволяя создавать сложные динамические интерфейсы с чистой разметкой и эффективным управлением DOM.


Атрибуты

accesskey Горячая клавиша для активации
class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
slot Имя слота для теневого DOM
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
translate Определяет возможность перевода
shadowrootmode Режим корня теневого DOM (experimental)

Поддержка браузерами

13.0 26.0 15.0 22.0 8.0