Тег бр


Поддержка браузерами

Описание

HTML тег <br> (break row) обрывает поток текста и вставляет перенос строки, то есть все содержимое, расположенное после него, будет выведено с новой строки. Такое действие полезно при форматировании текста, требующего фиксированных переносов строк, например, для написания адреса или стихов.

Тег <br> является пустым элементом, это означает, что он не имеет содержимого и закрывающего тега. По стандарту HTML5 в пустых элементах после имени тега или атрибута (если используется) можно поставить символ пробела, после которого указывается закрывающий слэш /, который помечает открывающий тег, как самозакрывающийся.

Обратите внимание на то, что тег <br> просто вставляет перенос, заставляя текст начинаться с новой строки, в отличие от тега <p>, который отображается с дополнительными вертикальными промежутками, разделяющими смежные абзацы.

Атрибуты


Тег <br> поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример

  <p>  Девочка Даша в песочке игралась,<br>   Время от времени громко смеялась,<br>  Чудно девчушке, что мальчик Андрюшка<br>  Ходит по улице, голый с писюшкой!  </p>  

Результат данного примера в окне браузера:

Пример использования тега <br>

puzzleweb.ru

Другие ответы дают некоторые хорошие способы добавления разрывов строк, в зависимости от ситуации. Но следует отметить, что селектор :after является одним из лучших способов сделать это для управления CSS над списками ссылок (и подобных вещей) по причинам, указанным ниже.

Вот пример, предполагающий оглавление:

<style type="text/css">  .toc a:after{ content: "a"; white-space: pre; } </style>  <span class="toc">  <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>  <a href="#b1">Item B1</a> <a href="#b2">Item B2</a> </span>   

И вот техника Simon_Weaver, которая проще и более совместима. Он не разделяет стиль и контент как можно больше, требует больше кода, и могут быть случаи, когда вы хотите добавить перерывы после факта. Тем не менее, это отличное решение, особенно для более старого IE.

<style type="text/css">  .toc br{ display: none; } /* comment out for horizontal links */ </style>  <span class="toc">  <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>  <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/> </span> 

Обратите внимание на преимущества вышеупомянутых решений:

  • Независимо от пробелов в HTML, вывод одинаков (vs. pre)
  • Никакие дополнительные дополнения не добавляются к элементам (см. комментарии NickG display:block)
  • Вы можете легко переключаться между горизонтальными и вертикальными списками ссылок с помощью некоторого общего CSS без перехода в каждый HTML файл для изменения стиля.
  • Нет float или clear стилей, влияющих на окружающий контент
  • Стиль отделен от содержимого (vs. <br/> или pre с жестко запрограммированными перерывами)
  • Это также может работать для свободных ссылок с использованием a.toc:after и <a class="toc">
  • Вы можете добавить несколько разрывов и даже текст префикса/суффикса

qaru.site

Пример использования тега разрыва

<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’>

тег br

Значение left запрещает обтекание элемента, выровненного по левому краю, поэтому текст, «споткнувшись» о тег <br>, расположится ниже изображения или иного плавающего элемента.

Точно такой результат получится от использования аргумента all, который ни за что не позволит тексту обтекать картинку ни справа, ни слева.

Значение right запрещает тексту обтекание элемента, выровненного по правому краю, поэтому после тега <br> тексту не останется ничего другого, как обойти изображение, обтекая его справа.

Значение none («ни вашим, ни нашим») вообще снимает все полномочия с атрибута clear, и тег <br> молча переносит строку вниз.

Значение по умолчанию, как таковое, у атрибута clear тега отсутствует.

Тег <br> — это мягкий перенос

Тег разрыва строки очень удобен для создания необходимых интервалов между абзацами, внутри которых он используется как мягкий перенос, но не как средство для деления текста на абзацы.


тег br языка гипертекстовой разметки html означает

Не следует слишком увлекаться тегом перевода строк для форматирования текста, потому что результаты его применения не всегда отличаются изяществом.

Например, если использовать тег <br> для перевода строк внутри абзаца, это может привести к появлению «гребенки» в окне пользователя, если оно меньше окна, на которое ориентировался веб-мастер.

fb.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

Зачем придумали тег 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>. Как выглядит на практике? Вот так:

использование в html тега nobr

Что делает тег <nobr>? Он говорит браузеру — отображай текст внутри тега без переносов, одной строкой. И, если текст длинный, тогда у нас появится некрасивая и длинная горизонтальная полоса прокрутки, а пользователи должны будут прокрутить текст по горизонтали, чтобы прочитать его полностью.

Как мы понимаем, это очень неудобно. Но тег есть!

Итоги — использование br, nobr, hr, p в HTML

Подводя итог, резюмирую содержание статьи:

  • тег <p> — для того чтобы разделять абзацы
  • тег <br> — для того чтобы перенести строку внутри абзаца (недопустимо «создание абзацев» при помощи этого тега или злоупотребление им)
  • тег <hr> — для создания горизонтальной линии-разделителя
  • тег <nobr> — для запрета переноса строк в HTML

blogwork.ru

Тег <br />

HTML тег <br /> осуществляет перенос строки:

<!DOCTYPE HTML>
<html>
<title>BR в html: разбиваем текстовый ряд</title>
<body>
<p>Тег &lt;br /> <br /> разбивает строку.</p>
</body>
</html>

Результат:

Тег <br />
разбивает строку.

Еще пример:

<p>Два друг за другом идущих тега &lt;br /> <br /><br /> увеличат расстояние между строчек по вертикали.</p>

Результат:

Два друг за другом идущих тега <br />

увеличат расстояние между строчек по вертикали.

Но это не повод использовать их в таких целях! Для увеличения расстояния пользуйтесь CSS.

В XHTML спецификации также присутствует тег <br />.
В ранних версиях HTML данный тег выглядел так: <br>, но данная запись устарела!

Быстрое развитие технологий

Интернет правит миром, а современная жизнь и ее смысл могут состоять в познании.

Предпосылки быстрого развития информационных технологий могут быть следующими:

  1. Глобализация знаний и развитие торговли.
  2. Глобализация экономики, интеграция производства и торговли.
  3. Необходимость в распространении информации в любое время, из любого уголка планеты.
  4. Стремительное развитие информационных систем и сетей, необходимость в преобразовании, обработке, защите, передаче, приеме и сохранении больших объемов информации, а также необходимость в управлении базами данных.
  5. Непрерывно увеличивающаяся конкуренция в сфере финансовых и других видов услуг.

ab-w.net

Часто можно встретить, что начинающий верстальщик для реализации некоторых своих дизайнерских решений использует тэг <br/>. Однако остаётся актуальным вопрос «правильное ли это решение?».

На практике встречаются ситуации когда при помощи этого тэга сделаны списки, абзацы, и многое другое. Например, у такого «персонажа» вместо правильной разметки списка:

Встречается код разряда:

И таких неверных примеров большое количество.

Где не нужен br

Однако, если визуально можно достичь необходимого результата при помощи этого тэга, то почему бы его не использовать?

Ответ прост- этот тэг предназначен для переноса строки, а ни как не для создания списков и абзацев.

Верстка сайта, в котором часто встречается тэг <br/>, показывает низкую квалификацию «мастера». Для формирования правильной структуры документов искушённый верстальщик может использовать значительное количество специализированных тэгов, среди которых <li>, <p> и так далее. А для добавления необходимых визуальных эффектов используют стили css.

Ранее этот тэг использовался, к примеру, при написании стихов, где требовался перенос строки при незаконченной мысли. Однако при желании можно обойтись без него и здесь. Для этого есть даже несколько вариантов, первый это задать с помощью CSS ширину блока, а второй это вместо тэга <p> использовать тэг <pre>.

Для тех кто не знает что такое тэг <pre>— это тег, добавляющий на страницу предформатированный текст. Это значит, что пробелы, переносы строки и т.д. внутри его сохраняются.

При желании мы можем использовать полезные свойства <pre> у самых рядовых абзацев воспользовавшись кодом:

Хотелось бы отметить, что большинство верстальщиков, которые пишут семантический код, не включили тэг <br/> в перечень тэгов используемых при такой верстке.

Выводы

  • Если возникает необходимость в создании списка на вашей странице, то не стоит использовать тег <br/> , для этого существуют теги <ul>, <ol>, <li>, а если вам не требуется отображение маркера списка, то не стоит возвращаться к злокачественному тегу, а просто стоит в css прописать list-style-type значение none. Например:
  • При написании текста для формирования абзацев следует использовать тег <p>. Ну, а если требуется создать некоторое расстояние между конкретными абзацами нам в помощь придёт CSS, с селекторами first-child, last-child, nth-child – для определения конкретного абзаца и свойствами padding, margin для задания необходимого отступа. Например:

    Не стоит делать этого так:

    Решение задачи просто. Во первых для каждого абзаца используем необходимый для этого тэг, и HTML код приобретёт вид:

    А для создания необходимого промежутка между последним абзацем и текстом используем сss:

  • И последнее, для создания новой строки можно использовать вспомогательные элементы, к которым относятся <span> и <div>. Например:

    Это можно сверстать:

    Ну а для переносов строк добавляем CSS:

Следовательно, при верстке качественного проекта, можно прекрасно обойтись и без <br/>, стоит лишь воспользоваться знаниями тэгов и использовать каждый из них по назначению.

vaden-pro.ru

Делаем html код удобным.

Сейчас наш код понятен и легко читаем, так как в нем мало текста и практически нет тегов. Когда мы создадим более сложную страницу, то там будет много тегов, соответственно найти нужный будет сложно.

Чтобы не было каши из тегов, нужно изначально расставлять теги и строки так, чтобы они визуально воспринимались легче. Когда браузер считывает информацию с html страницы, ему без разницы сколько пробелов и сколько пустых строк в коде.

Структура html страницы

Я изменил текст в коде страницы относительно той, которую мы создавали, но это не важно. На левом и на правом рисунке изображен один и тот же код. Оба варианта будут отображаться браузером на экране монитора абсолютно одинаково. Согласитесь, работать с кодом изображенным справа будет гораздо легче, чем с тем, что слева.

Рассматриваемый нами код очень простой, но даже сейчас заметна разница в визуальном восприятии. Каких-либо определенных правил «наведения порядка» нет, каждый мастер сам решает как ему удобнее работать.

Перенос строки html. Тег &ltbr&gt.

Обратите внимание на рисунок. В первом варианте текст написан в одну строку, во втором варианте в две строки.

Перенос строки html

Браузер будет отображать оба варианта одинаково. Текст будет написан в одну строку:

Перенос строки html

Вы спросите, почему так? Ведь в одном из кодов часть текста перенесена на другую строку. Было бы логично если бы в браузере часть текста тоже перенеслась на другую строку, но у html своя логика в этом отношении. Если мы в html коде делаем перенос строки, то для браузера это равнозначно одному пробелу (как обычный пробел между словами в тексте). Если мы перенесем часть текста не на одну строку вниз, а на 2 или 3 (любое количество), то браузер все равно будет считать это расстояние за один обычный пробел между словами и при выводе на экран текст будет писаться в одну строку.

htmlboss.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.