Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML Коды языков
Теги HTML

HTML тег <hr>

Поддержка браузерами

Описание

HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.

Примечание: горизонтальная линия используется для визуального и логического разделения контента, но в ней отпадает необходимость, если сразу после нее идет заголовок или тег, начинающий новый раздел, или логический блок (<section>, <article>), так как эти элементы по умолчанию подразумевают тематические изменения.

По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров:

<p>Разделительная линия:</p>

<hr style="border: 2px solid blue;">

<p>Изменяем цвет линии:</p>

<hr style="border-color: red;">

<p>Изменяем толщину линии:</p>

<hr style="border-width: 3px;">

<p>Пунктирная линия html:</p>

<hr style="border-style: dashed;">
Попробовать »

Атрибуты

HTML тег <hr> поддерживает Глобальные атрибуты и События

Стиль по умолчанию

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
} 

Пример

<h1>HTML</h1>
<p>HTML это язык разметки гипертекста...</p>

<hr>

<h1>CSS</h1>
<p>CSS определяет то, как будут отображаться элементы...</p> 

Результат данного примера в окне браузера:

Пример использования тега <hr>
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen