Атрибут data-* тега <hr>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в теге <hr> для использования в JavaScript и CSS. Это пользовательские атрибуты, которые не влияют на отображение элемента.
<hr data-section="products"
data-weight="2"
data-color-mode="dark">
Особенности именования:
| Формат | Пример | Недопустимо |
|---|---|---|
| Префикс data- | data-section-type |
section-type |
| Kebab-case | data-color-scheme |
dataColorScheme |
| Латинские буквы | data-index |
data-индекс |
Доступ из JavaScript:
<hr id="customHr" data-section="about" data-visible="true">
<script>
const hr = document.getElementById('customHr');
// Чтение данных
console.log(hr.dataset.section); // "about"
console.log(hr.dataset.visible); // "true"
// Изменение данных
hr.dataset.visible = "false";
hr.dataset.customValue = "123";
</script>
Использование в CSS:
<style>
hr[data-color-mode="dark"] {
border-color: #333;
}
hr[data-weight="2"] {
height: 2px;
}
hr[data-type="dotted"] {
border-style: dotted;
}
</style>
<hr data-color-mode="dark" data-weight="2" data-type="dotted">
Пример с JSON данными:
<hr data-info='{"section":"contacts","priority":1}'>
<script>
const hr = document.querySelector('hr');
const info = JSON.parse(hr.dataset.info);
console.log(info.priority); // 1
</script>
Рекомендации по использованию:
- Используйте для:
- Хранения информации о разделе
- Конфигурации внешнего вида
- Интеграции с JavaScript-плагинами
- Избегайте:
- Хранения больших объемов данных
- Дублирования видимого контента
- Критически важной информации
- Для сложных данных используйте JSON в одном атрибуте
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Значения всегда строковые (требуют преобразования)
- Не влияет на SEO
- Доступен через API dataset
- Максимальная длина значения зависит от браузера
Примечание: Хотя <hr> обычно используется как визуальный разделитель, data-атрибуты позволяют добавить ему семантическую нагрузку или настроить поведение через JavaScript без изменения визуального представления.