Теги <br> и <hr> выглядят просто - один переносит строку, другой рисует линию. Но у обоих узкое, конкретное назначение: <br> годится только там, где перенос строки - часть одной мысли (стихи, адрес), а <hr> обозначает не просто черту, а разрыв темы. Использовать их вместо отступов между абзацами - частая ошибка, которая ломает разметку для стилей и вспомогательных технологий, даже если на глаз всё выглядит нормально.
Присмотрись к результату справа: у первого и третьего абзаца есть синяя рамка слева - её даёт CSS-правило для тега <p>. У второго куска текста рамки нет, хотя на глаз он тоже выглядит отдельным блоком - для браузера это не абзац, а просто перенос строки внутри тела страницы. Попробуй обернуть его в <p>...</p> - рамка появится.
Тег br: перенос строки внутри одного абзаца
<br> - пустой (void) тег: у него нет содержимого и закрывающего тега, как у <img>. Он уместен только там, где перенос строки значим сам по себе, а не является границей между независимыми мыслями - например, в стихотворении или в адресе, где каждая строка - часть одного целого. Использовать его вместо тега <p> для разделения самостоятельных абзацев или чтобы добавить "воздух" между блоками - плохая идея: такой отступ не настраивается через CSS и выглядит по-разному в зависимости от размера шрифта и ширины экрана.
Роняет тень на тихий сад<br>Вечерний луч зари. - перенос строки значим: это две строки одного стихотворения.
Первый абзац.<br><br>Второй абзац. - выглядит как два абзаца, но для браузера и для стилей это один блок текста с двумя переносами строки внутри.
Тег hr: черта, которая обозначает смену темы
<hr> - тоже пустой (void) тег, но по смыслу он не про линию, а про разрыв: он обозначает переход к новой теме или смену сцены внутри раздела. Если нужна просто декоративная черта без смены темы - например, чтобы визуально отделить блок в дизайне - правильнее оформить её через CSS-рамку (border) у обычного элемента, а не использовать <hr> не по назначению.
<p>...конец первой главы.</p><hr><p>Глава 2. Новое место действия...</p> - настоящая смена темы, hr уместен.
<hr color="silver" width="80%" noshade> - атрибуты color, width и noshade устарели ещё в HTML4; тот же внешний вид сегодня задают через CSS.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Использовать <br><br> вместо закрытия и открытия <p> для нового абзаца | Не создаёт настоящую границу: стили, заданные для тега p, к такому тексту не применяются, а вспомогательные технологии не получают чёткого сигнала о конце одной мысли и начале другой | Закрывать </p> и открывать новый <p>, расстояние между ними задавать через CSS margin |
| Ставить несколько <br> подряд, чтобы получить "воздух" между блоками | Такой отступ не настраивается через CSS и выглядит по-разному в зависимости от шрифта и ширины экрана | Использовать margin или padding в CSS у нужного блока |
| Задавать внешний вид <hr> через атрибуты align, width, size, color, noshade | Эти атрибуты HTML4 считаются устаревшими и могут по-разному поддерживаться браузерами | Стилизовать линию через CSS-свойства border, width, margin |
| Ставить <hr> просто для украшения, без реальной смены темы | Вводит в заблуждение поисковики и вспомогательные технологии, которые ожидают за hr настоящий тематический разрыв | Использовать <hr> только между разными темами или разделами; для декоративной линии - CSS-рамка у обычного блока |
Шпаргалка
| Тег или задача | Что использовать |
|---|---|
| <br> | Перенос строки внутри одной мысли (стихи, адрес) - пустой тег, без закрытия |
| <hr> | Тематический разрыв между разделами - пустой тег, без закрытия |
| Нужен просто отступ между абзацами | CSS margin у <p>, не <br> |
| Нужна декоративная линия без смены темы | CSS border у обычного блока, не <hr> |
| Устаревшие атрибуты <hr> (align/width/size/color/noshade) | Заменить на CSS: border, width, margin |
Коротко: отвечаем на вопросы
Нужно ли закрывать br и hr отдельным закрывающим тегом?
Нет. Оба тега - пустые (void) элементы: у них не может быть содержимого, поэтому закрывающий тег не пишется, точно так же, как у img. Иногда перед закрывающей скобкой добавляют слэш по старой привычке из XHTML, но в обычном HTML он не обязателен.
Можно ли использовать br, чтобы отделить один абзац от другого?
Технически перенос строки появится и текст визуально разъедется на два куска, но настоящей границы абзаца это не создаст: стили и отступы, заданные для тега p, к такому тексту не применяются, а вспомогательные технологии не получают чёткого сигнала о конце одной мысли и начале другой. Правильно закрывать один тег p и открывать следующий, а расстояние между ними задавать через CSS margin.
Правда ли, что hr - это просто линия для украшения страницы?
Исторически - да, в первых версиях HTML этот тег описывался просто как горизонтальная черта. Но современная спецификация определяет его через смысл: hr обозначает тематический разрыв - смену темы или сцены внутри раздела, а не просто визуальную линию. Если нужна декоративная линия без смены темы, правильнее оформить её через CSS-рамку у обычного блока.
Какие атрибуты hr устарели и чем их заменить?
В HTML4 у hr были презентационные атрибуты align, width, size, color и noshade, управлявшие внешним видом линии. Сегодня они считаются устаревшими - тот же результат, толщину, цвет, ширину и стиль линии, теперь задают через CSS-свойства вроде border и width.
