HTML-тег <hr>

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

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

Базовый синтаксис HTML-тега <hr>

Основной синтаксис тега <hr> следующий: 

<hr>

Тег <hr> не требует закрывающего тега, поскольку это пустой элемент.

Атрибуты HTML-тега <hr>

  • Глобальные атрибуты: Тег <hr> поддерживает все глобальные атрибуты, такие как id , class , style и title .
  • Атрибуты событий: Тег <hr> поддерживает такие атрибуты событий, как onclick , onmouseover и onfocus .

Базовый пример HTML-тега <hr>

Вот простой пример использования тега <hr> для разделения разделов текста: 

<!DOCTYPE html>
<html>
    <body>
        <h1>Welcome to My Blog</h1>
        <p>This is the first section of the content.</p>
        <hr>
        <p>This is the second section of the content, separated by a horizontal rule.</p>
    </body>
</html>
Базовый пример HTML-тега hr

Пояснение: <hr> создает видимую горизонтальную линию между двумя абзацами, визуально разделяя содержимое.

Стилизация тега <hr> с помощью CSS

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            hr {
                border: none;
                height: 2px;
                background-color: #007BFF;
                margin: 20px 0;
            }
        </style>
    </head>
    <body>
        <h1>Styled Horizontal Rule</h1>
        <p>This is the first section of content.</p>
        <hr>
        <p>This is the second section of content.</p>
    </body>
</html>
Оформление тега hr с помощью CSS

Результат: Горизонтальная линия оформлена в индивидуальном стиле, имеет индивидуальный цвет и высоту, что повышает ее визуальную привлекательность.

Создание пунктирных или точечных линий с помощью <hr>

CSS позволяет создавать пунктирные или точечные горизонтальные линии с помощью тега <hr> : 

<!DOCTYPE html>
<html>
    <head>
        <style>
            hr.dashed {
                border: none;
                border-top: 2px dashed #FF5733;
                margin: 20px 0;
            }

            hr.dotted {
                border: none;
                border-top: 2px dotted #28A745;
                margin: 20px 0;
            }
        </style>
    </head>
    <body>
        <h1>Custom Horizontal Rules</h1>
        <p>This is the first section of content.</p>
        <hr class="dashed">
        <p>This section is separated by a dashed line.</p>
        <hr class="dotted">
        <p>This section is separated by a dotted line.</p>
    </body>
</html>
Создание пунктирных или точечных линий с помощью hr

Результат: горизонтальные линии отображаются в виде пунктирных или точечных линий в зависимости от примененного класса CSS.

Практическое применение тега <hr>

  • Разделители разделов: разделяют контент на отдельные разделы, улучшая его читаемость.
  • Визуальные разрывы: добавляйте тематические разрывы между несвязанным контентом на одной странице.
  • Элементы стиля: используйте пользовательские стили, чтобы <hr> соответствовал дизайну вашей веб-страницы.