Клавиша / esc

<hr>

Подвести черту.

Время чтения: меньше 5 мин

Кратко

Скопировано

Та самая горизонтальная черта, которая разделяет смысловые блоки на странице.

Пример

Скопировано

Разделим два абзаца горизонтальной чертой и немного стилизуем её.

        
          
          <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-color.

Светлана Коробцева советует

Скопировано

🛠 Дизайнеры любят пользоваться линией как средством выразительности. Почти никогда такая линия не является смысловым разделителем, и поэтому не стоит верстать её как <hr>. Пользуйтесь этим тегом в том случае, когда без разделителя информация теряет смысл или в ней становится трудно разобраться.

В демо ниже все линии декоративные и потому свёрстаны как псевдоэлемент ::after, а разделяющий визуально одинаковые, но разные по смыслу абзацы <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: "***";
}

        
        
          
        
      
Открыть демо в новой вкладке