Тег HR используется в веб-документах для отображения горизонтальной линии на странице или иногда называется горизонтальным правилом. В отличие от некоторых тегов, этот не нуждается в закрывающем теге, поэтому все, что вам нужно сделать, это ввести <hr>, чтобы вставить строку.
Линия простирается по всей ширине страницы и содержит некоторые атрибуты по умолчанию, описывающие толщину, местоположение и цвет линии, но вы можете изменить эти настройки, если хотите.
Вы можете редактировать характеристики горизонтальной линии в документе HTML5 , редактируя CSS страницы . Горизонтальные линии HTML4 были изменены на стороне HTML документа.
Является ли HR-тег семантическим?
В HTML4 тег HR не был семантическим. Семантические элементы описывают их значение в терминах, которые браузер и разработчик могут легко понять. Тег HR — это просто способ добавить простую строку в документ, где бы вы этого ни хотели. Стилирование только верхней или нижней границы элемента, где вы хотели, чтобы линия отображалась, помещало горизонтальную линию вверху или внизу элемента, но в целом тег HR был проще использовать для этой цели.
Начиная с HTML5, тег HR стал семантическим, и теперь он определяет тематический разрыв на уровне абзаца, который является разрывом в потоке контента, который не требует новой страницы или другого более сильного разделителя — это смена темы. Например, вы можете найти тег HR после смены сцены в истории или он может указывать на изменение темы в справочном документе.
Атрибуты HR в HTML4 и HTML5
В HTML4 тегу HR могут быть назначены простые атрибуты, включая выравнивание, ширину и ношейд . Выравнивание может быть установлено влево , центр , права или оправдать . Ширина регулирует ширину горизонтальной линии по умолчанию на 100 процентов, которая расширяет линию по всей странице. Noshade атрибут оказывает сплошной цвет линии вместо затененного цвета.
Эти атрибуты устарели в HTML5. Вместо этого вы должны использовать CSS для стилизации ваших HR-тегов в документах HTML5.
Это пример HTML5 стилизации горизонтальной линии до высоты 10 пикселей с использованием встроенного CSS (стили, вставленные непосредственно в документ вместе с HTML):
Использование встроенного CSS для стилизации HR.
<hr style = "height: 10px">
Другой способ стилизации горизонтальных линий в HTML5 — использовать отдельный файл CSS и ссылаться на него из документа HTML . В файле CSS вы бы написали стиль так:
Использование внешнего CSS для стилизации HR.
hr {
высота: 10 пикселей
}
Тот же эффект в HTML4 требует добавления атрибута к содержимому HTML . Вот как можно изменить размер горизонтальной линии с помощью атрибута размера :
Стилизация HR-тега в HTML4.
<hr size = "10">
Существует гораздо больше свободы в стилизации горизонтальных линий в CSS по сравнению с HTML.
Только стили ширины и высоты одинаковы для всех браузеров, поэтому при использовании других стилей могут потребоваться пробные версии и ошибки. Ширина по умолчанию всегда равна 100 процентам ширины веб-страницы или родительского элемента. Высота правила по умолчанию составляет два пикселя.