HTML тег <br>
Тег HTML <br> используется для переноса строки. Узнайте об использовании тега <br>, его стилизации с помощью CSS и смотрите примеры.
Тег HTML <br> вставляет одиночный перенос строки. На этой странице объясняется, когда перенос строки является частью содержимого (и <br> — правильный инструмент), когда речь идёт об отступах или макете (и здесь нужен CSS), как экранные дикторы его обрабатывают, а также какие альтернативы — например, <pre> или CSS-свойство white-space — подходят для стихов и преформатированного текста.
Определение
Тег HTML <br> определяет перенос строки. В отличие от тега <p>, который создаёт абзацный отступ, тег <br> просто переносит следующий текст на новую строку без добавления дополнительного вертикального пространства.
Главное правило: используйте <br> только тогда, когда перенос строки является частью самого содержимого — текст, который по природе своей структурирован построчно, например почтовый адрес, стихотворение или текст песни. Если перенос начинает новую мысль — это абзац, используйте <p>. Если перенос нужен для отступа или визуального макета — это задача для CSS, а не <br>.
Синтаксис
Тег <br> является пустым элементом в HTML5, то есть не требует закрывающего тега. Однако в XHTML он должен быть самозакрывающимся (<br />).
Пример использования тега HTML <br>:
пример тега br
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage.</h1>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>Применение
Используйте <br> только тогда, когда перенос строки относится к содержимому. Типичные случаи — почтовые адреса, стихи и тексты песен, где структура строк несёт смысловую нагрузку.
Пример: адрес с <address> и <br>
Почтовый адрес — классический пример использования <br>: каждая строка действительно является отдельной строкой одного блока, а не отдельным абзацем. Элемент <address> обеспечивает семантику контактной информации, а <br> форматирует строки.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Jane Doe<br />
123 Main Street<br />
Springfield, IL 62704<br />
USA
</address>
</body>
</html>Пример: стихи и тексты песен
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage</h1>
<blockquote>
But I'm not the only one<br />
I hope some day you'll join us<br />
And the world will live as one.<br />
</blockquote>
<cite>John Lennon "imagine"</cite>
</body>
</html>Когда не следует использовать <br>
<br> предназначен для структурирования строк, а не для отступов или макета. Два распространённых случая неправильного использования:
- Разделение абзацев. Разрыв между двумя самостоятельными мыслями — это граница абзаца. Оберните каждый блок в
<p>. - Создание вертикальных промежутков. Несколько тегов
<br>подряд для того, чтобы сдвинуть контент вниз — это презентационный трюк. Отступы должны задаваться через CSS с помощью свойстваmargin.
Не используйте <br> для разделения абзацев или добавления отступов. Используйте элементы <p> совместно со свойством CSS margin для управления вертикальным пространством.
Доступность: почему несколько <br><br> подряд вредно
Экранные дикторы объявляют каждый <br> как перенос строки. Если вы ставите несколько подряд, чтобы создать видимый промежуток — например <br><br><br> — диктор произносит «перенос строки, перенос строки, перенос строки», что является шумом без смысла и нарушает поток чтения. Кроме того, пустые строки не имеют семантической связи с окружающим текстом, поэтому вспомогательные технологии не могут помочь пользователю понять структуру документа.
Правильное решение — выразить промежуток через CSS. Замените следующее:
<p>First paragraph.</p>
<br /><br /><br />
<p>Second paragraph.</p>на это:
<style>
.gap-below {
margin-bottom: 3rem;
}
</style>
<p class="gap-below">First paragraph.</p>
<p>Second paragraph.</p>CSS-версия сохраняет два абзаца как настоящие абзацы и позволяет margin управлять визуальным расстоянием, так что экранный диктор ничего лишнего не объявляет.
Альтернативы для стихов и преформатированного текста
Когда весь блок структурирован построчно, управление переносами с помощью CSS или <pre> зачастую чище, чем расстановка <br> по всей разметке. Краткая схема принятия решений:
- Несколько намеренных переносов внутри текста (адрес, единичная строка в абзаце): используйте
<br>. - Блок, где переносы строк в исходном коде — это именно те переносы, которые нужны, но пробелы должны сворачиваться (например, стихи): задайте
white-space: pre-lineна контейнере, чтобы переносы строк в HTML стали реальными переносами без каких-либо<br>. - Текст, где каждый пробел и перенос строки должны сохраняться в точности (код, ASCII-арт): используйте элемент
<pre>, который отображает содержимое моноширинным шрифтом и соблюдает все пробелы.
<style>
.poem {
white-space: pre-line;
}
</style>
<p class="poem">
Roses are red
Violets are blue
</p>Здесь переносы строк берутся из исходного текста, а white-space: pre-line превращает их в видимые переносы — без <br>.
Атрибуты
Тег <br> когда-то принимал атрибут clear, управлявший взаимодействием переноса с плавающими элементами. Этот атрибут был удалён в HTML5 и не должен использоваться.
| Атрибут | Значение | Статус |
|---|---|---|
clear | all / left / right / none | Удалён в HTML5 — не использовать |
Чтобы предотвратить обтекание контента вдоль плавающего элемента, используйте CSS-свойство clear:
.below-float {
clear: both;
}Тег <br> поддерживает глобальные атрибуты и атрибуты событий.