Тег <br> в документе HTML используется для создания переноса строки в тексте.
Обычно такой прием используется в стихотворениях или в адресе, где необходимо разделение строк. Это одиночный тег и его не нужно сопровождать закрывающим тегом. Если вы поместите <br> в код HTML, он будет работать так же, как нажатие клавиши ввода (Enter) в текстовом редакторе.
br не содержит внутри себя никакого контента.
Примечание. Не используйте
<br>для создание отступа между двумя абзацами, вместо этого используйте свойство CSS margin.
Синтаксис
Синтаксис очень простой.
Это текст, в котором нужно сделать <br/> перенос строкиФактически при выполнении этого кода часть строки после br окажется на новой строчке.
Различие между <br> и <br/>
Тег br можно использовать двумя способами: <br> или <br/>. То есть во втором случае используем в конце символ слеш, как для закрывающего тега. Рекомендуется использовать закрытый вариант <br/>, потому что он поддерживается как в HTML, так и в XHTML. Если вы будет проверять код сайта в каком-нибудь валидаторе кода, то скорее всего варианты без слеша будут отображаться как ошибочные. Хотя все браузеры прекрасно отрабатывают оба варианта.
Примеры
На примере известного стихотворения сначала покажем, как может выглядеть результат, когда вы просто поместите его строчки без br.
See the Pen
br 1 by Андрей (@adlibi)
on CodePen.
Хотя сам код выглядит с разрывами строк, но в конечном документы весь текст выстраивается в одну строку.
А теперь добавим заветные теги и теперь все, что нужно, начинается с новой строки.
See the Pen
br 2 by Андрей (@adlibi)
on CodePen.
Почему не использовать <p>
Перенос строки в HTML можно сделать и при помощи тега <p> (абзац). Но в отличие от него br не добавляет пустой отступ перед строкой. К тому же у вас может быть своя стилизация абзаца, например сделаны отступы после него. То есть br создает меньший вертикальный отступ, в отличие от p.
Но, конечно, при желании для перевода строки можно обойтись и с помощью тега абзаца.
Еще замечание: br должен находится внутри <body>.