Атрибут data-* тега <ul>

Описание

Атрибуты data-* позволяют хранить дополнительную информацию в элементе <ul>. Эти пользовательские атрибуты не влияют на отображение списка, но могут использоваться JavaScript или CSS для добавления функциональности.

Пример использования:
<ul data-list-type="navigation" data-visible-items="5" data-load-more="true"> <li>Главная</li> <li>О нас</li> <li>Услуги</li> <li>Портфолио</li> <li>Контакты</li> </ul>

Особенности работы:

  • Имена атрибутов должны начинаться с data-
  • Могут содержать любые пользовательские данные
  • Значения хранятся в виде строк
  • Доступны через JavaScript и CSS

Примеры практического применения:

Атрибут Пример значения Назначение
data-list-id "user-123-permissions" Идентификация списка
data-max-items "10" Ограничение количества элементов
data-sortable "true" Возможность сортировки
data-api-endpoint "/api/get-items" URL для загрузки данных

Пример доступа через JavaScript:

<ul id="user-list" data-role="admin-menu" data-version="2.1"> <li>Профиль</li> <li>Настройки</li> </ul> <script> const list = document.getElementById('user-list'); console.log(list.dataset.role); // "admin-menu" console.log(list.dataset.version); // "2.1" </script>

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

<style> ul[data-list-style="compact"] { padding-left: 10px; line-height: 1.2; } ul[data-role="admin-menu"] li { background-color: #f0f8ff; } </style> <ul data-list-style="compact"> <li>Компактный пункт 1</li> <li>Компактный пункт 2</li> </ul>

Рекомендации:

  • Используйте осмысленные имена атрибутов
  • Храните только простые данные (для сложных структур используйте JSON)
  • Избегайте хранения чувствительной информации
  • Придерживайтесь единого стиля именования (kebab-case)

Ограничения:

  • Не предназначены для видимого пользователю контента
  • Значения всегда строковые (нужно преобразовывать числа/булевы значения)
  • Не влияют на SEO напрямую
  • Чрезмерное использование может усложнить код