HTML - тег <template> — это новый элемент в HTML5. Этот тег используется для хранения фрагментов HTML-кода, которые можно клонировать и вставлять в HTML-документ.
Тег <template> - синтаксис и код
Тег <template> представлен парами. Содержимое записывается между открывающим (<template>) и закрывающим (</template>) тегами.
Пример использования <template> для хранения содержимого, которое будет скрыто при загрузке страницы и JavaScript, чтобы отобразить его:
<button onclick="showContent()">Показать скрытый контент</button>
<template>
<h2>Птичка и ноутбук</h2>
<img src="/htm/bird_and_laptop.jpg" width="270" height="359">
</template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
ПРИМЕР
Код для проверки поддержки браузером:
<script>
if (document.createElement("template").content) {
document.write("Ваш браузер поддерживает шаблон!");
} else {
document.write("Ваш браузер не поддерживает шаблон!");
}
</script>
Определение и использование
- HTML - тег
<template> используется как контейнер для хранения некоторого содержимого HTML, скрытого от пользователя при загрузке страницы;
- Содержимое тега скрыто от пользователей и хранится на стороне клиента. Он инертен, пока не активирован с помощью JavaScript;
- Браузер обрабатывает содержимое элемента template при загрузке страницы, чтобы убедиться в корректности кода;
- Шаблоны можно размещать в любом месте внутри <head>, <body> или <frameset> и содержать любой тип контента, разрешенный в этих элементах.
Все внутри элемента template анализируется как обычный HTML. Однако есть некоторые исключения:
- Он не рендерится;
- Теги
<script> внутри него не запускаются;
- Теги
<style> внутри него не оцениваются;
- Внешние ресурсы не отображаются;
- Содержимое этого элемента не считается находящимся в документе;
- Если
document.getElementById() или querySelector() используются на главной странице, дочерние узлы шаблона не будут возвращены обратно.
Поддержка <template> браузерами
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
Атрибуты
Глобальные атрибуты
Тег <template> также поддерживает глобальные атрибуты в HTML
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
