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

Отличие тега <template> от обычных тегов заключается в том, что его содержимое обрабатывается особым образом. Фрагменты кода хранятся на стороне клиента и не отображаются во время загрузки страницы. Для того, чтобы активировать содержимое тега и вставить его в код документа, необходимо использовать скрипты.

Браузер обрабатывает содержимое тега, чтобы убедиться в валидности кода.

Тег <template> может быть расположен практически в любом месте HTML-документа, в тегах <head>, <body> или <frameset>, и может содержать контент, который допускается в этих тегах.

Синтаксис

Тег <template> парный, содержимое пишется между открывающим (<template>) и закрывающим (</template>) тегами.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <template id="myTemplate">
      <p>Содержимое шаблона</p>
    </template>
    <div id="normalContent">
      <p>Обычный параграф.</p>
    </div>
    <!-- функция JavaScript: Клонирует template и добавляет в обычный контент -->
    <button onclick="useTemplate();">Показать содержимое</button>
    <script>
      function useTemplate() {
      var myTemplate = document.getElementById('myTemplate');
          normalContent = document.getElementById('normalContent');
          clonedTemplate = myTemplate.content.cloneNode(true);
          normalContent.appendChild(clonedTemplate);
          }
    </script>
  </body>
</html>

Результат

templateexample1

Тег <template> поддерживает глобальные атрибуты.

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

chrome firefox safari opera
26+ 22+ 8+ 15+

Практикуйте свои знания

Какие из следующих операторов относятся к функциональным возможностям HTML-тега <template>?
Считаете ли это полезным?