Глобальный атрибут data-*
Синтаксис
<[элемент] data-[пользовательское-имя-атрибута]="[значение(-я)]"> ... </[элемент]>
Описание
Глобальный атрибут / параметр data-*
(от англ. "data" ‒ «данные») является универсальным параметром, так как его можно использовать практически для любых целей. В частности основной задачей данного параметра является хранение пользовательских данных частной страницы или приложения, для которых больше нет соответствующих атрибутов или элементов.
Атрибут «data-*
» является XML-совместимым, и не содержит прописных букв (даже если всё же имя атрибута прописывается заглавными буквами, они все автоматически переводятся в соответствующие символы нижнего регистра).
Данный атрибут условно делится на 2 составляющие:
- Приставка «
data-
» определяющая данный атрибут; - Следующее за приставкой «
data-
» пользовательское имя атрибута, которое может быть задано любым количеством символов.
Примечание
Каждый HTML элемент может иметь любое количество пользовательских атрибутов данных указывающих любое значение.
Разработчикам создающим при помощи параметра «data-
» свои собственные атрибуты рекомендуется включить в название атрибута своё собственное уникальное название для того, чтобы снизить риск совпадений имён атрибутов. Например, data-programmerbook-attributes="значение"
.
Поддержка браузерами
Спецификация
Верс. | Раздел | |
---|---|---|
HTML | ||
2.0 | ||
3.2 | ||
4.01 | ||
5.0 | 3.2.5.9 Embedding custom non-visible data with the data-* attributes | Перевод |
5.1 | 3.2.5.9. Embedding custom non-visible data with the data-* attributes | |
XHTML | ||
1.0 | ||
1.1 |
Значения
Пример использования
<html>
<head>
<meta charset="utf-8">
<title>Глобальный параметр data-*</title>
<link type="text/css" href="table.css" rel="stylesheet">
</head>
<body>
<h1>Пример с "data-*"</h1>
<h2>Координаты</h2>
<table>
<thead><tr> <th>x</th> <th>y</th> </tr></thead>
<tbody>
<tr> <td data-coords="x">0</td> <td data-coords="y">0</td> </tr>
<tr> <td data-coords="x">124</td> <td data-coords="y">152</td> </tr>
</tbody>
</table>
<p>При ширине окна просмотра меньше 500px таблица меняет свою структуру. (В процессе изменения структуры используются значения атрибутов «data-coords».)</p>
</body>
</html>