Атрибуты data-*

24.09.2013

Влад Мержевич

В HTML5 для любого элемента можно использовать собственные атрибуты, начинающиеся с префикса data-. Это позволяет хранить разную информацию, которая может помочь в работе скриптов, а также для оформления элементов через CSS.

Атрибут должен иметь хотя бы один символ в нижнем регистре. Буквы в верхнем регистре хотя и допустимы, но они принудительно будут переведены в нижний регистр, поэтому не дают никакого эффекта. В именах атрибутов можно использовать дополнительные дефисы, как показано в примере 1.

Пример 1. Использование атрибута data-*

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>data-*</title>
 </head>
 <body>
  <ul>
    <li data-damage-resistance="40" data-weight="45" 
        data-effect="+10 Сопротивляемость радиации">
        Силовая броня Клёна</li>
    <li data-damage-resistance="40" data-weight="45"
        data-effect="+15 Сопротивляемость радиации">
        Силовая броня Анклава</li>
    <li data-damage-resistance="50" data-weight="40"
        data-effect="+25 Сопротивляемость радиации">
        Силовая броня T-51b</li>
  </ul>
 </body>
</html>

Сами атрибуты никак не выводятся в браузере, поэтому мы увидим обычный список.