| Справочник HTML
Элемент <br> (от англ. «break» ‒ «ломать, разрывать») устанавливает перевод строки в том месте, где он находится. В отличие от элемента <p>, использование <br> не добавляет пустой отступ перед строкой.
Синтаксис
Текст <br>текстЗакрывающий тег
Не требуется.
Атрибуты
- clearУстарел в HTML5
- Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Используйте вместо него свойство CSS clear.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Используйте свойство CSS margin. Допускается использование от одного до четырёх значений margin, в примере ниже их 3. Первый ноль задаёт отступ от верхнего края элемента, второй — от левого и правого одновременно, третий — от нижнего. Т.е. от блока текста до нижеследующего элемента — в примере задан отступ, равный 7rem.
<style>
element {
font-size: 2rem;
margin: 0 0 7rem;
}
</style>Отступы посредством margin корректно работают, если их задать для блочных, а не инлайновых элементов.
Различия между HTML 4.01 и HTML5
Нет.
Пример использования:
Элемент <br>
Пример HTML:
Попробуй сам<p>А.С. Пушкин</p>
<p> Я помню чудное мгновенье:<br>
Передо мной явилась ты, <br>
Как мимолетное виденье, <br>
Как гений чистой красоты. <p>Спецификации
Поддержка браузерами
| Элемент | ||||||
| <br> | 3+ | 1+ | 3.5+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <br> | 1+ | 1+ | 6+ | 1+ |
seodon.ru | Теги HTML — Тег BR
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <BR> используется для принудительного обрыва строки и перевода ее в начало. Обрыв строки считается пробелом, поэтому в месте установки тега пробелы не нужны. Он не добавляет никаких дополнительных полей (margin) тексту, как это делают многие блочные теги, например <BLOCKQUOTE> или <P>. А при помощи атрибута clear можно запретить обтекание текстом плавающего объекта.
Атрибуты
Личные атрибуты:
- clear — Запрещает или разрешает обтекание текстом плавающих элементов.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: текст (строки).
Модель тега: inline (встроенный, уровня строки).
Может содержать: данный элемент является пустым/Empty.
Открывающий тег: необходим. Закрывающий тег: запрещен.
Синтаксис
текст<br>текстПример HTML: применение тега BR
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега BR</title>
</head>
<body>
<p>Всегда так будет, как бывало:<br>Таков издревле белый свет:<br>
Ученых много - умных мало,<br>Знакомых тьма - а друга нет!</p>
<p>А.С. Пушкин</p>
</body>
</html>Результат примера
Результат. Применение тега BR.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
должен быть в тему
Автор: Евгений Рыжков Дата публикации: 12.02.2010
Все или почти все используют в верстке тег <br />. Много ли из нас, поставив в коде <br /> задумывается: а действительно ли нужен он тут? Среди неискушенных верстальщиков часто можно увидеть верстку такого характера: верстка меню
А еще можно встретить вот такие замечательные абзацы:
Может возникнуть вопрос: если на сайте отображается все по дизайну, что тут не так? А не так тут — этот кошмарный, кривой, ламерский код, который говорит об очень низкой квалификации верстальщика, который не удосужился даже разобраться в назначениях тегов.
Применять <br/> для формирования абзацев — это все равно, что забивать гвозди шуруповертом (это тоже инструмент, почему бы и не забить гвоздь, другой).
Для чего предназначен тег <br />?
Тег <br /> (от англ. break) создает переход на новую строку (W3C Recomendation :: Controlling line breaks). Это практически все, что говорят нам спецификации. Но даже тут сказано, точнее не сказано о том, что он предназначен для создания абзацев или еще чего-либо. Потому, что для абзацев есть тег <p>, а для предформатированного текста — <pre> (см. спецификации на той же странице).
<br> следует использовать в текстовом блоке для обозначения новой строки, где предложение (фраза, мысль) не закончено, например в стихах.
<p> Мой дядя самых честных правил,<br/> Когда не в шутку занемог,<br/> Он уважать себя заставил<br/> И лучше выдумать не мог.<br/> </p>
update 17.02.10 — если воспользоваться серым веществом то и тут можно и даже нужно избавиться от <br/>. Для таких случаев предназначен тег <pre> — предформатированный текст, который отобразится в окне браузера с учетом всех пробелов, табуляций и нажатых энтеров. А если считаешь, что тегу <pre> не хватает логичности, можно оставить абзац (<p>) и ему добавить возможностей <pre>. Такой фокус позволяет сделать CSS свойство white-space.
update 23.02.10 — с «фокусами» с white-space: pre нужно быть внимательными, т.к. при таком форматировании строки, которые не вмещаются в блок, автоматически не переносятся на новую строку. Особенно это актуально для резиновых дизайнов. В таких случаях все же приходится применять <br />.
Заметка
Сообщество фанатов семантической верстки вообще не включили <br> в перечень семантических тегов.
Где не должно быть <br />?
Везде, где можно обойтись тегами и CSS правилами:
- использовать теги по назначению: для абзацев — это <p>, для списков и меню — <ul>, <ol>, <li> и т.д.;
- для форматирования текста и задания отступов использовать CSS правила, такие как margin, padding, width, height;
- использовать отдельные элементы для создания строк (для этого лучше всего подходят нейтральные элементы разметки <div> и <span>).
Рассмотрим несколько практических примеров. Абзацы:
<p>Высокопроизводительное решение обладает большой пропускной способностью — до 6.2 Gbps, и идеально подходит не только для передачи голоса и видео, но так же и для новых приложений, требовательных к полосе пропускания, таких как on-line игры. </p> <p>SGSN способен поддерживать до 1,5 миллионов активных PDP сессий.</p>
p {
margin-bottom: 12px;
}
Несколько строк номеров телефонов:
<div> <i>Позвоните нам</i> <span>(495) <b>760-45-46</b></span> <span>(495) <b>795-94-63</b></span> <span>(499) <b>120-05-70</b></span> </div>
.phoneNumbers {
color: #fff;
}
.phoneNumbers i {
display: block; /* это позволяет избавиться от br */
margin-bottom: 5px;
color: #494949;
}
.phoneNumbers span {
display: block; /* и это */
}
Всего один-два CSS свойства и ты избавляешься от <br />. Вот еще пара примеров, где и как можно обойтись без переноса строки:
Надеюсь, что после всех этих примеров ты будешь использовать <br /> очень, очень…очень редко. И вообще, <br /> — это удел необразованных редакторов, а не верстальщиков.
Ах да, забыл, что еще можно использовать атрибут clear (<br clear=»all» />), для очистки потока. Но и это решается некоторыми манипуляциями с CSS — прием clearfix.
Материалы
Тэг br, а так ли он нужен?
Часто можно встретить, что начинающий верстальщик для реализации некоторых своих дизайнерских решений использует тэг <br/>. Однако остаётся актуальным вопрос «правильное ли это решение?».
На практике встречаются ситуации когда при помощи этого тэга сделаны списки, абзацы, и многое другое. Например, у такого «персонажа» вместо правильной разметки списка:
<ul> <li>Строка Списка первая</li> <li>Строка Списка вторая</li> <li>Строка Списка третья</li> </ul>
Встречается код разряда:
Строка Списка первая<br/> Строка Списка вторая<br/> Строка Списка третья<br/ >
И таких неверных примеров большое количество.
Где не нужен br
Однако, если визуально можно достичь необходимого результата при помощи этого тэга, то почему бы его не использовать?
Ответ прост- этот тэг предназначен для переноса строки, а ни как не для создания списков и абзацев.
Верстка сайта, в котором часто встречается тэг <li>, <p> и так далее. А для добавления необходимых визуальных эффектов используют стили css.
Ранее этот тэг использовался, к примеру, при написании стихов, где требовался перенос строки при незаконченной мысли. Однако при желании можно обойтись без него и здесь. Для этого есть даже несколько вариантов, первый это задать с помощью CSS ширину блока, а второй это вместо тэга <p> использовать тэг <pre>.
Для тех кто не знает что такое тэг <pre>— это тег, добавляющий на страницу предформатированный текст. Это значит, что пробелы, переносы строки и т.д. внутри его сохраняются.
При желании мы можем использовать полезные свойства <pre> у самых рядовых абзацев воспользовавшись кодом:
Хотелось бы отметить, что большинство верстальщиков, которые пишут семантический код, не включили тэг <br/> в перечень тэгов используемых при такой верстке.
Выводы
- Если возникает необходимость в создании списка на вашей странице, то не стоит использовать тег
<br/>, для этого существуют теги<ul>, <ol>, <li>, а если вам не требуется отображение маркера списка, то не стоит возвращаться к злокачественному тегу, а просто стоит в css прописать list-style-type значение none. Например:<ul> <li> Строка первая </li> <li> Строка вторая </li> <li> Строка третья </li> </ul> <style> li { list-style-type: none; } </style> - При написании текста для формирования абзацев следует использовать тег
<p>. Ну, а если требуется создать некоторое расстояние между конкретными абзацами нам в помощь придёт CSS, с селекторами first-child, last-child, nth-child – для определения конкретного абзаца и свойствами padding, margin для задания необходимого отступа. Например:Нам нужен какой-нибудь текст. Который имеет несколько абзацев. И перед последним должен быть большой отступ.
Не стоит делать этого так:
Нам нужен какой-нибудь текст.<br/> Который имеет несколько абзацев.<br/> <br/> <br/> И перед последним должен быть большой отступ.
Решение задачи просто. Во первых для каждого абзаца используем необходимый для этого тэг, и HTML код приобретёт вид:
<p> Нам нужен какой-нибудь текст.</p> <p> Который имеет несколько абзацев.</p> <p> И перед последним должен быть большой отступ.</p>
А для создания необходимого промежутка между последним абзацем и текстом используем сss:
p:last-child { padding-top: 25px; } </li> - И последнее, для создания новой строки можно использовать вспомогательные элементы, к которым относятся
<span>и<div>. Например:Контакты: (xx) xxx-xx-xx (xx) xx-xx-xxx bizonoff.net vaden-pro.ru
Это можно сверстать:
<div> <span>Контакты:</span> <span>(xx) xxx-xx-xx</span> <span>(xx) xx-xx-xxx</span> <span>bizonoff.net</span> <span>vaden-pro.ru</span> </div>
Ну а для переносов строк добавляем CSS:
Следовательно, при верстке качественного проекта, можно прекрасно обойтись и без <br/>, стоит лишь воспользоваться знаниями тэгов и использовать каждый из них по назначению.
Оценок: 8 (средняя 5 из 5)
- 4816 просмотров
Понравилась статья? Расскажите о ней друзьям:
Еще интересное
html — Как правильно писать тег BR?
Лучше писать — <br> !!!
Это экономичнее 🙂
+ у меня сложилось подозрение, что Все браузеры, в будущем НЕ откажутся от поддержки <!DOCTYPE HTML> (скорее наоборот, становится стандартом — навечно) , а <... xhtml> — вроде как устаревающий тип и все по старинке полагаются на авось (аля 100% совместимость с браузерами и стандартами 2000 года).
А сейчас 2018-й год !!! И всем браузерам этот мусорный(именно так для них) слеш нахрен ненужен !!! А все генераторы мусора (хтмл редакторы), подтвержают свой статус — генераторов МУСОРА, поскольку до сих пор продолжают везде лепить этот слеш в одинарные теги — br, img, inp, и др.
Юзайте только — <!DOCTYPE html>.
Вас все поймут, а процессоры скажут спасибо (нет мусорных знаков — быстрее парсинг текста)
P.S.
А вот и подтверждение:
Тег <br> — РЕКОМЕНДОВАН в PHP5
и взят в будущее !!!
Старые варианты — <br/> и <br /> (вместе со старыми браузерами, а именно IE 6) — можно отправить на пенсию и — не МУСОРИТЬ в своих html страницах. Особенно если они полностью ваши (не паранойная СMS или полностью Ваша CMS).
Обновление
Да не надо ничего ЗУБРИТЬ !!! это как 2+2 !
<br> <hr> <input> <img> <meta>
ОДИНАРНЫЕ !!! им ненужен закрывающий тег, они не предусмотрены спецификой этих тегов. И тем более всякие мусорные слеши (в теле). Это HTLM и все популярные и современные CMS только под HTML (других не встречал)
Я это понял в первый день (10 лет назад) !!! Просто Вам лично самому не противно видеть <br /> (4+3 долба по клаве) или <br> (всего 4 долба).
Далее берём парсер (обработчик текста). Если вы рубите, что ему проще обрабьать первый вид, а не два других — то печалька (за вас).
Даже разработчики HTML это поняли и уже открыто рекомендуют использовать ТОЛЬКО <br>.
Терь понятно почему очень многие сайты такие мегатонные (сотни килобайт мусорного кода). Пихают всё сразу и везде, не задумываясь о том, а нужно ли всё это нам посетителям. Нам нужна моментальная загрузка страниц, ответ на вопрос или найденный товар и умеренная реклама (только на полях, а не между строк). Но как заглянешь на страницу такого мегатонника, так сразу видишь куеву тучу ненужных (мне) подгрузок (яваскрипта, шрифтов, css с внешних серверов, которые в таких раскладах — не кешируются) и их приходится обрабатывать моему браузеру на моём компе (тратятся мои ресурсы — НИЗАЧТО).
Обновление 2
Вот когда мне нужно будет, чтото перевести(портировать) в XHTML. Это мой скрипт сделает автоматически (добавит слеш). Другим на моих страницах делать нечего и под их унификацию подстраиваться не о