Кратко
СкопированоТа самая горизонтальная черта, которая разделяет смысловые блоки на странице.
Пример
СкопированоРазделим два абзаца горизонтальной чертой и немного стилизуем её.
<p>Слово «динозавр» означает...</p><hr><p>Среди палеонтологов...</p>
<p>Слово «динозавр» означает...</p>
<hr>
<p>Среди палеонтологов...</p>
hr { width: 50px; margin: 30px auto; border: 1px solid black;}
hr {
width: 50px;
margin: 30px auto;
border: 1px solid black;
}
Как понять
СкопированоТег <hr> помогает отделить независимые друг от друга блоки — например, подразделы в статье. Это блочный элемент, поэтому он встаёт в отдельном ряду, визуально разделяя информацию на странице.
Как пишется
СкопированоОдиночный тег, который не нужно закрывать — просто ставим <hr> в том месте, где нужен разделитель.
На практике
Скопированосоветует
Скопировано🛠 Конечно же, перед заголовком не стоит ставить <hr> — заголовок сам по себе является тематическим и визуальным разделителем.
🛠 Внешний вид тега <hr> по умолчанию обусловлен именно наличием рамки, поэтому для изменения, например, цвета линии достаточно изменить border.
советует
Скопировано🛠 Дизайнеры любят пользоваться линией как средством выразительности. Почти никогда такая линия не является смысловым разделителем, и поэтому не стоит верстать её как <hr>. Пользуйтесь этим тегом в том случае, когда без разделителя информация теряет смысл или в ней становится трудно разобраться.
В демо ниже все линии декоративные и потому свёрстаны как псевдоэлемент :, а разделяющий визуально одинаковые, но разные по смыслу абзацы <hr> представлен в виде звёздочек.
<span class="tag">Типографика</span><h1 class="title">Астеризм</h1><p class="paragraph">Астеризм это типографский символ...</p><hr><p class="paragraph">Одиночная звёздочка...</p>
<span class="tag">Типографика</span>
<h1 class="title">Астеризм</h1>
<p class="paragraph">Астеризм это типографский символ...</p>
<hr>
<p class="paragraph">Одиночная звёздочка...</p>
.tag, .title { position: relative;}.tag::after, .title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; background-color: black;}.tag::after { height: 1px;}.title::after { height: 2px;}hr { border: none; text-align: center;}hr::before { content: "***";}
.tag, .title {
position: relative;
}
.tag::after, .title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
background-color: black;
}
.tag::after {
height: 1px;
}
.title::after {
height: 2px;
}
hr {
border: none;
text-align: center;
}
hr::before {
content: "***";
}
