Атрибут id тега <hr>
Описание
Атрибут id задаёт уникальный идентификатор для тега <hr>, позволяя обращаться к горизонтальной линии через CSS и JavaScript. ID должен быть уникальным в пределах документа.
<hr id="sectionDivider">
<hr id="contentSeparator">
Особенности именования:
| Правило | Пример | Недопустимо |
|---|---|---|
| Начинается с буквы | id="mainDivider" |
id="1-divider" |
| Без пробелов | id="content_divider" |
id="content divider" |
| Регистрозависимость | Divider ≠ divider |
- |
Использование в CSS:
<style>
#specialDivider {
border: none;
height: 3px;
background: linear-gradient(to right, red, yellow, green);
margin: 2rem 0;
}
</style>
<hr id="specialDivider">
Доступ через JavaScript:
<hr id="dynamicHr">
<script>
const hr = document.getElementById('dynamicHr');
hr.style.border = '2px dashed #3498db';
hr.addEventListener('click', () => {
alert('Разделитель был кликнут!');
});
</script>
Рекомендации по использованию:
- Используйте для:
- Уникальной стилизации конкретного разделителя
- Программного управления через JavaScript
- Якорных ссылок внутри страницы
- Избегайте:
- Дублирования ID на странице
- Избыточного использования (лучше классы)
- Слишком общих имен (
id="line")
Динамическое создание:
<div id="hrContainer"></div>
<script>
const hr = document.createElement('hr');
hr.id = 'generatedHr';
document.getElementById('hrContainer').appendChild(hr);
</script>
Сравнение с классом:
| Характеристика | ID | Class |
|---|---|---|
| Уникальность | Один на странице | Много элементов |
| Специфичность CSS | Высокая (0100) | Низкая (0010) |
| Использование | Уникальные элементы | Группы элементов |
Примечание: Хотя ID обеспечивают прямой доступ к элементам, для стилизации горизонтальных линий чаще используют классы. ID стоит применять только когда нужно адресовать конкретный элемент для манипуляций через JavaScript или особого стилевого оформления.