<template>
- 25 января 2023
Что делает тег
Тег <template>
позволяет создавать на странице шаблоны с разметкой, которые можно использовать многократно без копирования кода.
Синтаксис тега <template>
<template>
<!-- содержимое шаблона -->
</template>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <template>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Шаблон для списка элементов:
<template>
<ul>
<li></li>
<li></li>
</ul>
</template>
Шаблон для карточки товара:
<template>
<div class="card">
<h2></h2>
<img src="">
<p></p>
<button></button>
</div>
</template>
Для чего использовать тег <template>
- Создать шаблон для многократно используемых элементов.
- Упростить работу с динамическим содержимым в JavaScript.
- Ускорить загрузку страницы за счёт снижения объёма передаваемых данных.
Атрибуты тега <template>
У тега нет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Для использования тега <template>
нет никаких ограничений.
Нюансы
Содержимое шаблона не отображается на странице, пока не будет склонировано и вставлено в документ при помощи JavaScript.
Поддержка браузерами
Тег поддерживается не всеми браузерами.
Актуальная информация — на caniuse.
Альтернативные теги
Альтернативных тегов для тега <template>
не существует.
Чем заменить тег
Прямой замены тегу <template>
не существует.
Актуальность
Тег <template>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023