Во время форматирования текста часто возникает потребность добавить новый абзац, но без пустой строки, которую вставляет тег абзаца <p>. Кроме того, иногда нужно в точности сохранить форматирование предыдущего текста, которое тег <p> «категорически» отменяет. Нередко приходится разбивать один абзац на несколько частей, связанных между собой логически.
Для некоторых фрагментов текста принятые для абзацев стандартные интервалы просто неуместны. Это могут быть надписи под картинками и в таблицах, стихи, цитаты, сноски и примечания.
Для принудительного переноса строк предусмотрен специальный тег, функция которого заложена в его названии br (break row — «разорвать ряд, строку»). Тег <br> языка гипертекстовой разметки html означает, что все следующее за ним содержимое должно начинаться с новой строки. Если нужно, можно проставить несколько тегов подряд, чтобы добиться необходимого интервала.
Тег <br> не чувствителен к регистру и не требует закрывающего тега, потому что это пустой элемент, но лучше привыкать закрывать все теги. В XHTML тег разрыва должен быть «наглухо закрыт» на обратный слэш.
Пример использования тега разрыва
<html>
<head>
<meta http-equiv=’Content-Type’>
<META HTTP-EQUIV=’Content-Type’ CONTENT=’text/html; windows-1251′>
<title >Тег br в действии < /title>
</head>
<body>
<р> Прогул на службе </р>
<p> Еще нигде и никогда <br>
Я не был столь плохим <br>
Начальства алчная орда <br>
Грызет меня живым </р>
</html>
Прогул на службе
Еще нигде и никогда
Я не был столь плохим.
Начальства алчная орда
Грызет меня живым.
Атрибут тега <br>
Единственный атрибут, которым обладает html тег <br>, называется Clear («очистить»). Он указывает браузеру, как поступить с переносимой строкой, если тексту придется обтекать так называемый плавающий элемент, каковым может быть, например, изображение с атрибутом выравнивания align, использующим значения right/left, или блок в CSS, которому прописано свойство float.
В спецификациях по XHTML 1.0 / HTML 4.01 атрибут clear можно использовать только с Transitional, Frameset и <!DOCTYPE>, иначе код будет нерабочим.
Свойства атрибута тега
Эффект от применения атрибута clear зависит от его значения и расположения обтекаемого текстом плавающего элемента. Атрибут может принимать 4 значения:
<br clear = ‘right | left | all | none’>
Значение left запрещает обтекание элемента, выровненного по левому краю, поэтому текст, «споткнувшись» о тег <br>, расположится ниже изображения или иного плавающего элемента.
Точно такой результат получится от использования аргумента all, который ни за что не позволит тексту обтекать картинку ни справа, ни слева.
Значение right запрещает тексту обтекание элемента, выровненного по правому краю, поэтому после тега <br> тексту не останется ничего другого, как обойти изображение, обтекая его справа.
Значение none («ни вашим, ни нашим») вообще снимает все полномочия с атрибута clear, и тег <br> молча переносит строку вниз.
Значение по умолчанию, как таковое, у атрибута clear тега отсутствует.
Тег <br> — это мягкий перенос
Тег разрыва строки очень удобен для создания необходимых интервалов между абзацами, внутри которых он используется как мягкий перенос, но не как средство для деления текста на абзацы.
Не следует слишком увлекаться тегом перевода строк для форматирования текста, потому что результаты его применения не всегда отличаются изяществом.
Например, если использовать тег <br> для перевода строк внутри абзаца, это может привести к появлению «гребенки» в окне пользователя, если оно меньше окна, на которое ориентировался веб-мастер.
fb.ru
Поддержка браузерами
Описание
HTML тег <br> (break row) обрывает поток текста и вставляет перенос строки, то есть все содержимое, расположенное после него, будет выведено с новой строки. Такое действие полезно при форматировании текста, требующего фиксированных переносов строк, например, для написания адреса или стихов.
Тег <br> является пустым элементом, это означает, что он не имеет содержимого и закрывающего тега. По стандарту HTML5 в пустых элементах после имени тега или атрибута (если используется) можно поставить символ пробела, после которого указывается закрывающий слэш /, который помечает открывающий тег, как самозакрывающийся.
Обратите внимание на то, что тег <br> просто вставляет перенос, заставляя текст начинаться с новой строки, в отличие от тега <p>, который отображается с дополнительными вертикальными промежутками, разделяющими смежные абзацы.
Атрибуты
Тег <br> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
Нет.
Пример
<p> Девочка Даша в песочке игралась,<br> Время от времени громко смеялась,<br> Чудно девчушке, что мальчик Андрюшка<br> Ходит по улице, голый с писюшкой! </p>
Результат данного примера в окне браузера:
puzzleweb.ru
Для чего предназначен тег <br />?
Тег <br /> (от англ. break) создает переход на новую строку (W3C Recomendation :: Controlling line breaks). Это практически все, что говорят нам спецификации. Но даже тут сказано, точнее не сказано о том, что он предназначен для создания абзацев или еще чего-либо. Потому, что для абзацев есть тег <p>, а для предформатированного текста — <pre> (см. спецификации на той же странице).
<br> следует использовать в текстовом блоке для обозначения новой строки, где предложение (фраза, мысль) не закончено, например в стихах.
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>).
Рассмотрим несколько практических примеров. Абзацы:
Несколько строк номеров телефонов:
Всего один-два CSS свойства и ты избавляешься от <br />. Вот еще пара примеров, где и как можно обойтись без переноса строки:
- Верстка меню (см. верстку вертикального меню)
- Верстка форм блоками
Надеюсь, что после всех этих примеров ты будешь использовать <br /> очень, очень…очень редко. И вообще, <br /> — это удел необразованных редакторов, а не верстальщиков.
Ах да, забыл, что еще можно использовать атрибут clear (<br clear=»all» />), для очистки потока. Но и это решается некоторыми манипуляциями с CSS — прием clearfix.
xiper.net
Все о теге для переноса строки br
Тег br осуществляет одинарный перенос строки в HTML (что это такое описано тут) и определяется всеми браузерами. Да, чуть не забыл — если вы используете тег br, то в отличие от тега абзаца p, у вас не добавляется пустой отступ (перед строкой).
Тег br является пустым (пустой значит без содержимого, ничего не содержит), а значит его не нужно закрывать. А так как его не нужно закрывать, было придумано краткое описание — оно изначально подразумевает то, что сам тег не имеет закрывающего тега.
Представьте на минуту, что не было бы краткого описания. Что тогда? Тогда пришлось бы каждый раз «закрывать и открывать» перенос строки примерно так: <br></br>. Это как минимум неудобно. Но, тем не менее, в строгом XHTML закрывать его обязательно тегом <br />.
Если стоит задача увеличить расстояние по вертикали — между теми строками, где вы вставляете перенос — сделайте двойной перенос, вставив тег <br> дважды подряд.
Пример:
Результат:
Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.
Ура, второе предложение на новой строке.
Реальный пример:
Результат:
А. Блок
Ночь, улица, фонарь, аптека,
Бессмысленный и тусклый свет.
Живи еще хоть четверть века —
Все будет так. Исхода нет.
Умрешь — начнешь опять сначала
И повторится все, как встарь:
Ночь, ледяная рябь канала,
Аптека, улица, фонарь.
Как выглядит:
Зачем придумали тег br?
Необходимость этого тега существует хотя бы потому что перенести строку «как в Ворде» (как делают неопытные пользователи), путем написания десятков пробелов подряд, — не выйдет.
Почему не выйдет? Потому что любое количество пробелов будет считаться браузером как один пробел, а не перенос строки — браузер автоматически удаляет лишние пробелы. Для этого и нужен перенос строк.
Читайте также: Как сделать пробел в HTML: https://blogwork.ru/probel-v-html/.
Но не стоит злоупотреблять тегом <br>, чтобы все больше и больше увеличивать расстояние между строками — для этого лучше всего воспользоваться базовыми инструментами HTML+CSS. Недопустимо создание новых абзацев или «как бы абзацев» (это считается плохим подходом) — только перенос строки!
Чтобы создавать и размечать абзацы вам следует пользоваться тегом p, а чтобы увеличить имеющееся расстояние между абзацами — измените каскадные таблицы стилей, например добавьте:
Бонус — br clear
А как сделать так чтобы текст, в котором вы поставили перенос строки, не обтекал плавающий элемент (это либо изображение с установленным align, либо элемент со свойством float), а начинался ниже элемента? Для этого можно использовать атрибут clear.
Допустим, у нас есть изображение выровненное по левому краю (align=»left»). Если мы установим <br clear=»all»> или <br clear=»left»>, то текст после тега <br> (следующая строка, которую мы и переносим) будет отображаться как надо, ниже рисунка. Другие значения атрибута clear тега <br> сделают так, чтобы текст обтекал рисунок, расположившись справа от него.
Использование этого специфичного атрибута не приветствуется спецификацией HTML — такой код будет невалидным.
Кстати, рекомендуем прочесть: Как вставить изображение в HTML.
БОНУС — тег-разделитель hr
Тег <hr> тоже одиночный, но, в отличие от <br>, он используется для создания горизонтального разделителя в виде линии. Более того, внешний вид этой линии мы можем задавать при помощи атрибутов. Но, конечно же, лучше это делать проверенными методами через CSS (что это такое, читайте здесь).
БОНУС — запрет переноса на новую строку с тегом nobr
Бывает и так, что мы хотим запретит перенос строки и избежать перевода на новую строку текста: либо между двумя конкретными словами, либо в целом абзаце. Что делать? Использовать тег <nobr>Ваш текст</nobr>. Как выглядит на практике? Вот так:
Что делает тег <nobr>? Он говорит браузеру — отображай текст внутри тега без переносов, одной строкой. И, если текст длинный, тогда у нас появится некрасивая и длинная горизонтальная полоса прокрутки, а пользователи должны будут прокрутить текст по горизонтали, чтобы прочитать его полностью.
Как мы понимаем, это очень неудобно. Но тег есть!
Итоги — использование br, nobr, hr, p в HTML
Подводя итог, резюмирую содержание статьи:
- тег <p> — для того чтобы разделять абзацы
- тег <br> — для того чтобы перенести строку внутри абзаца (недопустимо «создание абзацев» при помощи этого тега или злоупотребление им)
- тег <hr> — для создания горизонтальной линии-разделителя
- тег <nobr> — для запрета переноса строк в HTML
blogwork.ru
Тег <br />
HTML тег <br /> осуществляет перенос строки:
<!DOCTYPE HTML> |
Результат:
Тег <br />
разбивает строку.
Еще пример:
<p>Два друг за другом идущих тега <br /> <br /><br /> увеличат расстояние между строчек по вертикали.</p> |
Результат:
Два друг за другом идущих тега <br />
увеличат расстояние между строчек по вертикали.
Но это не повод использовать их в таких целях! Для увеличения расстояния пользуйтесь CSS.
В XHTML спецификации также присутствует тег <br />.
В ранних версиях HTML данный тег выглядел так: <br>, но данная запись устарела!
Быстрое развитие технологий
Интернет правит миром, а современная жизнь и ее смысл могут состоять в познании.
Предпосылки быстрого развития информационных технологий могут быть следующими:
- Глобализация знаний и развитие торговли.
- Глобализация экономики, интеграция производства и торговли.
- Необходимость в распространении информации в любое время, из любого уголка планеты.
- Стремительное развитие информационных систем и сетей, необходимость в преобразовании, обработке, защите, передаче, приеме и сохранении больших объемов информации, а также необходимость в управлении базами данных.
- Непрерывно увеличивающаяся конкуренция в сфере финансовых и других видов услуг.
ab-w.net