САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Атрибут data-*



Пример

Используйте атрибут data - * для внедрения пользовательских данных:

<ul>
  <li data-animal-type="bird">Сова</li>
  <li data-animal-type="fish">Лосось</li>
  <li data-animal-type="spider">Тарантул</li>
</ul>
Попробуйте сами »

Определение и использование

Атрибуты data-* используются для хранения личных данных пользователя на странице или в приложении.

Атрибуты data-* дают нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.

Затем сохраненные (пользовательские) данные можно использовать в JavaScript страницы для создания более привлекательного пользовательского интерфейса (без каких-либо вызовов Ajax или запросов к базе данных на стороне сервера).

Атрибуты data-* состоят из двух частей:

  1. Атрибут name не должн содержать заглавные буквы и должен содержать хотя бы один символ после префикса "data-"
  2. Значением атрибута может быть любая строка

Примечание: Пользовательские атрибуты с префиксом "data-" будет полностью проигнорирован агентом пользователя.


Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает атрибут.

Атрибут
data-* 4.0 5.5 2.0 3.1 9.6

Различий между HTML 4.01 и HTML5

Атрибуты data-* является новым в HTML5.


Синтаксис

<element data-*="somevalue">

Значение атрибута

Value Описание
somevalue Задает значение атрибута (в виде строки)

Связанные страницы

Учебник HTML: Атрибуты HTML

Справочник DOM HTML: Метод getAttribute() DOM HTML