Горизонтальная линия в HTML.

HTML тег hr и его использование

Горизонтальная линия (англ. "horizontal rule") - это графический элемент, который часто используется в HTML-документах для разделения разных разделов документа.

Горизонтальная линия создается с помощью HTML тега <hr>. В этой статье мы разберем, как использовать этот тег и какие его особенности.

Что такое тег <hr>?

Тег <hr> является одним из тегов разметки, которые используются для создания горизонтальной линии. Он всегда размещается внутри контейнера и не имеет закрывающего тега. Этот тег не требует никаких атрибутов, но его можно стилизовать с помощью CSS.

Как использовать

Чтобы добавить горизонтальную линию на веб-страницу, необходимо использовать HTML тег <hr>. Этот тег должен быть размещен внутри HTML контейнера, который может быть любым элементом, например, <div>, <p>, <section> и других.

Например, вот как можно использовать этот тег:

<div>
  <h2>Раздел 1</h2>
  <p>Пример текста</p>
  <hr>
  <h2>Раздел 2</h2>
  <p>Еще один пример текста</p>
  <hr>
</div>

Раздел 1

Пример текста


Раздел 2

Еще один пример текста


Как изменить стиль линии с помощью CSS?

Тег <hr> может быть стилизован с помощью CSS. Вот пример стилей для изменения цвета линии и ее ширины:

hr {
  color: blue;
  border-width: 2px;
}

Раздел 1

Пример текста


Раздел 2

Еще один пример текста


Также можно использовать стилизацию для изменения типа линии. Например, вы можете использовать команду border-style, чтобы изменить линию на пунктирную или пунктирно-точечную:

hr {
  border-style: dotted;
}

Раздел 1

Пример текста


Заключение

Тег <hr> является простым и эффективным способом для создания горизонтальной линии на веб-странице. Он может быть использован для разделения разных разделов документа и упрощения его чтения.

Если вы хотите изменить стиль линии, вы можете использовать CSS для этого. В HTML5 этот тег был заменен на более гибкий элемент  и стал поддерживать возможность изменения цвета и размера линии.