Элемент template
Синтаксис
<template> ... </template>
Описание
Элемент template
(от англ. "template" ‒ «шаблон, образец, трафарет») используется для обозначения шаблонных фрагментов HTML-документа, которые с помощью скриптов могут быть клонированы, заполнены соответствующим контентом и вставлены обратно в документ. При этом шаблоны должны представлять собой каркас будущего объекта, то есть некоторую (ветвящуюся) DOM-структуру без всяких текстовых вложений.
Примечание
Любой шаблон, вложенный в данный элемент ни как не влияет на внешний вид страницы, то есть содержимое шаблона на странице просто не отображается. А его клонированная и заполненная с помощью скриптов версия вставляется в документ после самого шаблона. При этом, если после шаблона уже имеется подобная вставка, то новая копия вставляется после неё.
Условия использования
Элемент template
может быть использован для обозначения шаблона:
- содержания метаданных (
base
,link
,meta
,noscript
,script
,style
,template
,title
); - потока контента (
a
,abbr
,address
,area
, и т. д.); - структуры
ol
,ul
,dl
,figure
,ruby
,object
,video
,audio
,table
,colgroup
,thead
,tbody
,tfoot
,tr
,fieldset
,select
,details
элементов; - структуры
menu
с атрибутом «type
».
Поддержка браузерами
Спецификация
Верс. | Раздел |
---|---|
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 |
Атрибуты
Пример использования
<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>