HTML тег <template>

Элемент <template> (от англ. "template" ‒ «шаблон, образец, трафарет») используется для объявления фрагментов HTML, которые могут быть клонированы и вставлены в документ с помощью скриптов.

Элемент позволяет хранить содержимое на стороне клиента, которое не должно отображаться при загрузке страницы, но впоследствии может быть заполнено с помощью JavaScript. Он также позволяет повторно использовать этот контент снова и снова. Кроме того, вы также можете изменить контент по своему усмотрению ‒ например, добавить данные из базы данных.

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

Содержимое элемента <template>, в отличие, к примеру, от <script type="неизвестный тип">, обрабатывается браузером. А значит, должно быть корректным HTML.

Синтаксис

<template>...</template>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <template> со следующими значениями CSS по умолчанию:

template {
    display: none;
}

Различия между HTML 4.01 и HTML5

Тег <template> является новым в HTML 5.

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

<template id="myTemplate">
<p>Контент Template. Кликните снова...</p>
</template>

<div id="normalContent">
<p>Обычный контент...</p>
</div>

<!-- функция JavaScript: Клонирует template и добавляет в обычный контент -->
<button onclick="useTemplate();">Use Template!</button>
<script>
function useTemplate() {
var myTemplate = document.getElementById('myTemplate'),
    normalContent = document.getElementById('normalContent'),
    clonedTemplate = myTemplate.content.cloneNode(true);
    normalContent.appendChild(clonedTemplate);
    }
</script>

Спецификации

Учебник HTML

HTML Элементы