Что делает тег

Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023