/html/template:> Шаблонный фрагмет HTML_

Элемент template

Синтаксис

HTML
<template> ... </template>

Описание

Элемент template (от англ. "template" ‒ «шаблон, образец, трафарет») используется для обозначения шаблонных фрагментов HTML-документа, которые с помощью скриптов могут быть клонированы, заполнены соответствующим контентом и вставлены обратно в документ. При этом шаблоны должны представлять собой каркас будущего объекта, то есть некоторую (ветвящуюся) DOM-структуру без всяких текстовых вложений.

Примечание

Любой шаблон, вложенный в данный элемент ни как не влияет на внешний вид страницы, то есть содержимое шаблона на странице просто не отображается. А его клонированная и заполненная с помощью скриптов версия вставляется в документ после самого шаблона. При этом, если после шаблона уже имеется подобная вставка, то новая копия вставляется после неё.

Условия использования

Элемент template может быть использован для обозначения шаблона:


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

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

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

Верс. Раздел
HTML
2.0 ---
3.2 ---
4.01 ---
5.0 4.11.3 The template element
5.1 4.12.3. The template element
XHTML
1.0 ---
1.1 ---

Атрибуты

Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент template</title>
<script src="template.js" type="text/javascript"></script>
</head>
<body>
<h1>Пример использования элемента "template"</h1>
<table border="1">
<caption>Значения цветов</caption>
<thead>
<tr> <th>Название</th> <th>HEX</th> <th>Красный</th> <th>Зелёный</th> <th>Синий</th> </tr>
</thead>
<tbody>
<!-- Создаём шаблон -->
<template id="row">
<tr>
<td><!-- 0:Название --></td>
<td><!-- 1:HEX --></td>
<td><!-- 2:Красный --></td>
<td><!-- 3:Зелёный --></td>
<td><!-- 4:Синий --></td>
</tr>
</template>
<!-- ~~~ -->
</tbody>
</table>
</body>
</html>
Элемент template