HTML тег <hr>
Тег HTML <hr> обозначает тематический разрыв (смену темы), отображаясь горизонтальной линией. Применение, стилизация CSS, атрибуты и доступность.
Тег HTML <hr> обозначает тематический разрыв — смену темы внутри раздела содержимого, например переход к новой сцене в рассказе или к новому предмету в справочной статье. По умолчанию браузер отображает его в виде горизонтальной линии, однако основное назначение тега — семантическое, а не декоративное.
В HTML5 тег <hr> несёт смысловую нагрузку: он сообщает браузерам и вспомогательным технологиям, что окружающие абзацы относятся к разным темам. В старых версиях HTML тег использовался исключительно как презентационный разделитель для визуального отделения содержимого. Сегодня, если требуется лишь декоративный разделитель без смены темы, следует использовать CSS border на другом элементе вместо <hr>.
Внешний вид линии зависит от браузера; нередко она отрисовывается с лёгким объёмным («затенённым») эффектом, который можно переопределить с помощью CSS.
Когда использовать <hr> (и когда не стоит)
Используйте <hr>, когда происходит реальная смена темы:
- Между двумя отдельными разделами длинной статьи или документа.
- Между сценами или смысловыми переходами в повествовании.
- Для разделения групп несвязанных полей формы или элементов списка, когда новый заголовок выглядел бы избыточно.
Не используйте <hr> исключительно в декоративных целях. Если линия добавлена лишь для красоты — например разделитель под каждым аватаром в списке — она создаёт лишний шум для пользователей программ чтения с экрана. В таком случае добавьте border к существующему элементу с помощью CSS или укажите атрибут role="presentation", чтобы линия игнорировалась семантически. Для структурирования разделов страницы по смыслу используйте семантические элементы HTML5.
Доступность: тег <hr> имеет неявную роль ARIA separator и передаётся вспомогательным технологиям — многие программы чтения с экрана объявляют его (например, как «разделитель»). Именно это и нужно при реальном тематическом разрыве, но именно поэтому чисто декоративная линия должна использовать CSS или role="presentation".
Синтаксис
Тег <hr> является пустым, то есть закрывающий тег не требуется. Однако в XHTML тег (<hr>) должен быть закрыт (<hr/>).
Пример использования HTML тега <hr>:
HTML тег hr
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>
This HTML tutorial will teach you the basics of the (Hyper Text Markup Language) and how to make your website from scratch.
</p>
<hr />
<h1>Learn CSS</h1>
<p>
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.
</p>
</body>
</html>Атрибут size тега HTML <hr>
Атрибут size задаёт высоту линии.
Хотя атрибут size является одним из устаревших атрибутов, он по-прежнему поддерживается всеми браузерами.
Пример использования HTML тега <hr> с атрибутом «size»:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a height of 40 pixels:</p>
<hr size="40" />
</body>
</html>Альтернативный способ задать размер тега <hr> — использовать CSS свойство height.
Пример использования HTML тега <hr> со свойством height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
height: 20px;
}
</style>
</head>
<body>
<p>
A horizontal line with a height of 20 pixels.
</p>
<hr />
</body>
</html>Атрибут width тега HTML <hr>
Атрибут width задаёт ширину линии.
Атрибут width также входит в список устаревших атрибутов, однако поддерживается всеми браузерами.
Пример использования HTML тега <hr> с атрибутом width:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a width of 30%:</p>
<hr width="30%" />
</body>
</html>Используйте CSS свойство width вместо атрибута width.
Пример использования HTML тега <hr> со свойством width:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 250px;
}
</style>
</head>
<body>
<p>A horizontal line with a width of 250 pixels:</p>
<hr />
</body>
</html>Атрибут noshade тега HTML <hr>
Атрибут noshade убирает объёмный эффект затенения с горизонтальной линии.
Атрибут noshade является одним из устаревших атрибутов, однако поддерживается всеми браузерами.
Пример использования HTML тега <hr> с атрибутом noshade:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Shaded horizontal line :</p>
<hr />
<p>Noshaded horizontal line:</p>
<hr noshade />
</body>
</html>Чтобы убрать стандартный объёмный («затенённый») вид в CSS, задайте <hr> плоский border и прозрачный фон. По умолчанию линия отрисовывается с помощью затенённых рамок, поэтому замена их одной сплошной рамкой (с очисткой фона) даёт простую плоскую линию — тот же результат, что и атрибут noshade.
Пример использования HTML тега <hr> со свойством border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
border: 1px solid #000000;
background: transparent;
}
</style>
</head>
<body>
<p>
A horizontal line specified with CSS border Property.
</p>
<hr />
</body>
</html>HTML атрибут align
Атрибут align задаёт выравнивание линии.
Атрибут align является одним из устаревших атрибутов, однако поддерживается всеми браузерами.
Пример использования HTML тега <hr> с атрибутом align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<hr align="left" width="70%" />
</body>
</html>Чтобы позиционировать <hr>, задайте width и управляйте горизонтальным margin — не text-align. Поскольку <hr> является блочным элементом, text-align не перемещает его. Используйте margin-right: auto для выравнивания влево, margin-left: auto для выравнивания вправо или margin: 0 auto для центрирования.
Пример использования HTML тега <hr> со свойством margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 50%;
margin-left: 0;
margin-right: auto;
}
</style>
</head>
<body>
<p>A horizontal line specified with CSS margin property</p>
<hr />
</body>
</html>Презентационные атрибуты тега <hr> являются устаревшими в HTML5. Для стилизации используйте CSS.
Как стилизовать тег <hr>
Для стилизации горизонтальной линии используется CSS свойство border.
Пример стилизации HTML тега <hr> с помощью свойства border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* blue border */
hr.one {
border-top: 1px solid #1c87c9;
}
/* Dashed border */
hr.two {
border-top: 1px dashed #1c87c9;
}
/* Dotted border */
hr.three {
border-top: 1px dotted #1c87c9;
}
/* Thick border */
hr.four {
border: 1px solid #1c87c9;
}
/* Large rounded border */
hr.five {
border: 15px solid #1c87c9;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Default:</p>
<hr />
<p>Styling "hr" tag</p>
<hr class="one" />
<hr class="two" />
<hr class="three" />
<hr class="four" />
<hr class="five" />
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | left center right | Задаёт горизонтальное выравнивание линии. Устарел в HTML5, но по-прежнему поддерживается браузерами для обратной совместимости. |
| noshade | noshade | Указывает, что линия будет отображаться без объёмного эффекта. Устарел в HTML5, но по-прежнему поддерживается браузерами для обратной совместимости. |
| size | pixels | Задаёт высоту линии. Устарел в HTML5, но по-прежнему поддерживается браузерами для обратной совместимости. |
| width | pixels % | Задаёт ширину линии. Устарел в HTML5, но по-прежнему поддерживается браузерами для обратной совместимости. |
Тег <hr> поддерживает глобальные атрибуты и атрибуты событий.