/html/global-attributes/data-attr:> Хранение пользовательских данных_

Глобальный атрибут data-*

Синтаксис

HTML
<[элемент] data-[пользовательское-имя-атрибута]="[значение(-я)]"> ... </[элемент]>

Описание

Глобальный атрибут / параметр data-* (от англ. "data" ‒ «данные») является универсальным параметром, так как его можно использовать практически для любых целей. В частности основной задачей данного параметра является хранение пользовательских данных частной страницы или приложения, для которых больше нет соответствующих атрибутов или элементов.

Атрибут «data-*» является XML-совместимым, и не содержит прописных букв (даже если всё же имя атрибута прописывается заглавными буквами, они все автоматически переводятся в соответствующие символы нижнего регистра).

Данный атрибут условно делится на 2 составляющие:

  1. Приставка «data-» определяющая данный атрибут;
  2. Следующее за приставкой «data-» пользовательское имя атрибута, которое может быть задано любым количеством символов.

Примечание

Каждый HTML элемент может иметь любое количество пользовательских атрибутов данных указывающих любое значение.

Разработчикам создающим при помощи параметра «data-» свои собственные атрибуты рекомендуется включить в название атрибута своё собственное уникальное название для того, чтобы снизить риск совпадений имён атрибутов. Например, data-programmerbook-attributes="значение".


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

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

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


Значения

В качестве значения может указываться любое значение, соответствующее замыслу пользователя.

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

Листинг кода
<!DOCTYPE html>
<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>
Глобальный параметр data-*