Атрибути data-*

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

У 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>

Самі атрибути не відображаються у браузері, тому ми побачимо звичайний список.

SEO текст: У HTML5 можна використовувати власні атрибути для елементів, що дозволяє зберігати різну інформацію для роботи скриптів та стилізації через CSS. Перегляньте приклад використання атрибута data-* у коді HTML.

Часті запитання