Br html тег: Тег | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

HTML первые шаги — урок 2 — теги p, div и их различие. Тег br

В прошлом уроке мы создали свой первый html документ, а это значит что вы уже знаете, что пишем html-код в текстовом редакторе, а все изменения смотрим через браузере, обновляя страницу (обычно кнопкой F5).

Итак, в этом уроке мы продолжим работать с текстом и будем использовать теги для оборачивания текста span, p, div. Также мы рассмотрим тег br.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h2>Мой первый HTML-документ</h2>
     
  </body>
</html>

Это наш код с которым мы будем дальше работать.

Давайте добавим такие вот строки.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h2>Мой первый HTML-документ</h2>
    <p>Первая строка в теге P</p>
    <p>Вторая строка в теге P</p>
    <div>Первая строка в теге DIV</div>
    <div>Вторая строка в теге DIV</div>
  </body>
</html>

Если вы откроете документ в браузере, то увидите, что теги p отображают предложения на разных строках, но есть и разница. У меня браузер задал по умолчанию для тега P отступ сверху и снизу. А для тега div прилепил строки друг к другу. Дело в том что p это тег параграфа текста, а тег div это тег блока, области. То есть если нам нужен тег для текста, то мы будем использовать тег P, а если нужно выделить определенную область, например чтобы сделать для этой области заливку цветом или сделать границы, то мы используем тег DIV.

Если на сайте есть текст, то он ДОЛЖЕН быть в теге p или h2-h6, если конечно этот текст не является служебным, то есть не служит для оформления страницы. Таким образом текст должен выглядеть так:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h2>Мой первый HTML-документ</h2>
    <div>
          <p>Первая строка в теге P</p>
      <p>Вторая строка в теге P</p>
    </div>
  </body>
</html>

Таким образом у нас такая последовательность body>div>p . Запомните, не должно быть тега div внутри тега p, body>p>div неправильно.

Давайте еще посмотрим как переносить текст на другую строку. Бывает что наш параграф текста огромный, то у нас есть выбор или разбить текст на насколько параграфов, или добавить тег переноса строки br. Тег одиночный тег, по этому косую черту мы ставим перед знаком больше.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h2>Мой первый HTML-документ</h2>
    <div>
      <p>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов.   Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы.
  С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.</p>
    </div>
  </body>
</html>

Строка стала слишкой большой если мы разобьем ее в текстовом документе, то на html это никак не скажется:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h2>Мой первый HTML-документ</h2>
    <div>
          <p>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). 
      HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов.
  Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения).
      В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы.    
      С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.</p>
    </div>
  </body>
</html>

Это нас не спасет в браузере ничего не измениться и тут к нам на помощь приходит тег . Давайте в конце каждой строчки поставим его.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h2>Мой первый HTML-документ</h2>
    <div>
      <p>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария).<br /> 
      HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.<br />
      HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов.
  <br /> 
      Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ.<br />
      Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста.<br />
      Мультимедийные возможности были добавлены позже.<br />
      Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения).<br />
      В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов).<br />
      Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы.  <br />
      С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.</p>
    </div>
  </body>
</html>

Теперь браузер понимает, что нужно переносить строку, ему об этом сообщает тег .

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

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h2>Мой первый HTML-документ</h2>
    <div>
      <p>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария).<br /> 
      HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.<br />
      HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов.  <br /> 
      Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ.<br />
      Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста.<br />
      Мультимедийные возможности были добавлены позже.<br />
      </p>
      <p>
      Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения).<br />
      В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов).<br />
      Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. <br />
      С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.</p>
    </div>
  </body>
</html>

Обновите страницу в браузере и вы увидите, что текст будет разбит на два абзаца.

Разрыв строки в HTML: используем тег br

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

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

Для принудительного переноса строк предусмотрен специальный тег, функция которого заложена в его названии br (break row — «разорвать ряд, строку»). Тег языка гипертекстовой разметки html означает, что все следующее за ним содержимое должно начинаться с новой строки. Если нужно, можно проставить несколько тегов подряд, чтобы добиться необходимого интервала.

Тег не чувствителен к регистру и не требует закрывающего тега, потому что это пустой элемент, но лучше привыкать закрывать все теги. В XHTML тег разрыва должен быть «наглухо закрыт» на обратный слэш.

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

<html>

<head>

<title >Тег br в действии < /title>

</head>

<body>

<р> Прогул на службе </р>

Еще нигде и никогда

Я не был столь плохим

Начальства алчная орда

Грызет меня живым </р>

</html>

Прогул на службе

Еще нигде и никогда
Я не был столь плохим.
Начальства алчная орда
Грызет меня живым.

Атрибут тега

Единственный атрибут, которым обладает html тег , называется Clear («очистить»). Он указывает браузеру, как поступить с переносимой строкой, если тексту придется обтекать так называемый плавающий элемент, каковым может быть, например, изображение с атрибутом выравнивания align, использующим значения right/left, или блок в CSS, которому прописано свойство float.

В спецификациях по XHTML 1.0 / HTML 4.01 атрибут clear можно использовать только с Transitional, Frameset и <!DOCTYPE>, иначе код будет нерабочим.

Свойства атрибута тега

Эффект от применения атрибута clear зависит от его значения и расположения обтекаемого текстом плавающего элемента. Атрибут может принимать 4 значения:
 
Значение left запрещает обтекание элемента, выровненного по левому краю, поэтому текст, «споткнувшись» о тег , расположится ниже изображения или иного плавающего элемента.
Точно такой результат получится от использования аргумента all, который ни за что не позволит тексту обтекать картинку ни справа, ни слева.
Значение right запрещает тексту обтекание элемента, выровненного по правому краю, поэтому после тега тексту не останется ничего другого, как обойти изображение, обтекая его справа.
Значение none («ни вашим, ни нашим») вообще снимает все полномочия с атрибута clear, и тег молча переносит строку вниз.
Значение по умолчанию, как таковое, у атрибута clear тега отсутствует.
Тег — это мягкий перенос
Тег разрыва строки очень удобен для создания необходимых интервалов между абзацами, внутри которых он используется как мягкий перенос, но не как средство для деления текста на абзацы.
Не следует слишком увлекаться тегом перевода строк для форматирования текста, потому что результаты его применения не всегда отличаются изяществом.
Например, если использовать тег для перевода строк внутри абзаца, это может привести к появлению «гребенки» в окне пользователя, если оно меньше окна, на которое ориентировался веб-мастер.
Использование br для вставки разрывов строк в HTML: Вот как это сделать »
В тегах HTML
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше
Элемент
Узнайте, как шрифты и веб-типографика работают в HTML: Руководство для начинающих
Что делает Использование br для вставки разрывов строк в HTML: вот как это делает ?
Элемент
используется для вставки разрыва строки или возврата каретки в родительский элемент, такой как абзац, без разрыва родительского контейнера.
Дисплей
встроенный
Использование
Текстовый
Содержание
1 Пример кода
2 Не злоупотребляет разрывами линии
3 Брейузер.
Это предложение и следующее будут на разных строках.
Это предложение и предыдущее будут на разных строках.
Это предложение и следующее будут на разных строках.
Это предложение и предыдущее будут в разных строках.
Не злоупотребляйте разрывами строк
Элемент создает разрыв строки. Можно легко злоупотребить этим элементом, чтобы создать стиль, который лучше имитирует более семантические параметры, такие как абзацы (
) и списки. Как правило, элемент следует использовать только в том случае, если разрыв строки сам по себе является неотъемлемой частью содержимого. Это может быть, например, в случае:
адреса
поэзия
образцы кода
John Smith
c/o Jane Smythe
123 Main St.
Northeast Southwestershire, XY 12345
John Smith
c/o Jane Smythe
123 Main St.
Northeast Southwestershire, XY 12345

Из ночи, покрывающей меня,
Черной, как бездна, от полюса до полюса,
Я благодарю всех богов
За мою непобедимую душу.

В тисках обстоятельств
Я не дрогнул и не закричал вслух.
Под ударами случая
Моя голова в крови, но непокорена.

За пределами этого места гнева и слезы
Маячит лишь Ужас тени,
И все же угроза лет
Находит и найдет меня, не боясь.

Неважно, насколько тесны врата, Как наполнен свиток наказаниями,
Я хозяин своей судьбы:
Я капитан своей души.
— Invictus, с картины Уильяма Эрнеста Хенли < /цитата>
Из ночи, покрывающей меня,
Черной, как бездна, от полюса до полюса,
Я благодарю всех богов
За мою непобедимую душу. В падении обстоятельств
я не поморщился и не закричал вслух.
Под ударами случая
Моя голова окровавлена, но непокорена. За этим местом гнева и слез
Вырисовывается лишь Ужас тени,
И все же угроза лет
Находит и найдет меня, не боясь. Неважно, насколько тесны врата,
Как заряжен свиток наказаниями,
Я хозяин своей судьбы:
Я капитан своей души.
— Invictus , Уильям Эрнест Хенли
Если вы обнаружите, что используете для разделения блоков текста, вам может понадобиться подумать об использовании тегов абзаца или другого элемента. Если вы используете их для создания большего пространства между элементами, вам следует использовать CSS margin .
Адам Вуд
Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.
Browser Support for br
All All All All All All
Attributes of br
Имя атрибута Значения Примечания
очистить
Используется для гарантии того, что разрывы строк «очищены» от плавающих или выровненных элементов над ними. Устарело.
Search HTML.com
Search for:
Наиболее популярные
HTML-тег
Использование тега HTML для создания встроенных фреймов: вот как
Тег HTML
Тег HTML Body: Master Самый важный HTML-элемент сейчас
Тег HTML</li></ul><h2> html — Когда элементы внутри абзаца игнорируются? </h2> спросил <time itemprop="dateCreated" datetime="2020-05-20T07:37:16"> 2 года, 6 месяцев назад </time> Изменено 1 год, 9 месяцев назад Просмотрено 5к раз Я обнаружил, что иногда <code> </code> элементов не отображаются в браузерах, которые я использую (Firefox и Chrome).<pre> Здравствуйте Здравствуйте </pre> будет отображаться так же, как:<pre> Привет Здравствуйте </pre> Таким же образом,<pre> Здравствуйте, <a href="https://ddg.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/b6/86/55/b686551980b313029a4239821333095c--flowchart-webdesign.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/b6/86/55/b686551980b313029a4239821333095c--flowchart-webdesign.jpg' /></noscript> gg">ddg </a> Здравствуйте </pre> и :<pre> Здравствуйте, <a href="https://ddg.gg">ddg</a> Здравствуйте </pre> также будет отображаться без разрывов строки при открытии в браузере. Мне не удалось найти в спецификации HTML раздел, определяющий такое поведение. Вы знаете, где найти спецификацию для этого, или не могли бы вы сформулировать это поведение по-простому? Меня также интересуют причины такого поведения, если вы их знаете. РЕДАКТИРОВАТЬ : я знаю, что размещение элементов br в этой позиции в HTML совершенно «неправильно», я не тот, кто генерирует этот HTML, но мне нужно преобразовать этот HTML в другой формат, поэтому я интересно понять, как браузеры обрабатывают этот случай.<ul><li> html</li><li> разрывы строк</li><li> спецификации</li></ul> 5 На мой взгляд, большинство браузеров следуют спецификации WHATWG , и я бы тоже так поступил.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Консорциум World Wide Web (W3C) 28 мая 2019 года объявил , что WHATWG будет единственным издателем стандартов HTML и DOM. Если бы у нас в этой спецификации были только следующие правила, то я бы следовал этим правилам. WHATWG имеет следующие рекомендации для элемента <code> br </code>: <blockquote> Элемент <code> br </code> представляет разрыв строки. Примечание: В то время как разрывы строк обычно представлены в визуальных средствах путем физического перемещения последующего текста на новую строку, таблицу стилей или пользовательский агент был бы в равной степени оправдан в том, чтобы сделать разрывы строк отображаются по-разному, например, в виде зеленых точек или в виде дополнительный интервал. <code> br </code> Элементы должны использоваться только для разрывов строк, которые на самом деле являются частью содержания, как в стихах или обращениях. В следующем примере показано правильное использование числа 9.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> 0014 бр </code> элемент:<pre> стр. Шерман 42 Уоллаби Уэй Сидней </pre> <code> br </code> элементы не должны использоваться для разделения тематических групп в параграф. Следующие примеры не соответствуют требованиям, так как они злоупотребляют <code> br </code> элемент:<pre> <a ...>34 комментария.</a> <a ...>Добавить комментарий.</a> <label>Имя: <input name="name"></label> <label>Адрес: <input name="address"></label> </pre> Вот правильные альтернативы вышеперечисленному:<pre> <a ...>34 комментария.</a> <a ...>Добавить комментарий.</a> <label>Имя: <input name="name"></label> <label>Адрес: <input name="address"></label> </pre> Если абзац состоит только из одного элемента <code> br </code>, он представляет собой пустую строку-заполнитель (например, как в шаблоне). Такой пустые строки не должны использоваться для презентационных целей. Любое содержимое внутри элементов <code> br </code> не должно считаться частью окружающий текст.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Примечание: Требования к отображению этого элемента включают двунаправленный алгоритм . Источник: WHATWG: Элемент <code> br </code> </blockquote> В ваших примерах у вас есть <code> br </code> элементов в <code> </code> и в <code> </a> </code> в конце <code> </code> элемент. Новая строка в конце этого элемента ничего не делает, но только в этом случае. В таких случаях вы можете игнорировать его. То же самое и в случае <code> br </code> элементов в <code> </a></div> </code> и в <code> </div> </code> на конце <code><div> </code> элемента. Цитата из рекомендаций WHATWG (см. выше): Если абзац состоит только из одного элемента <code> br </code>, он представляет собой пустую строку-заполнитель . Также это , а не пустой (как написал пользователь kalkronline ). А в случае конфликта мнений W3C и WHATWG пользовательские агенты должны следовать рекомендациям WHATWG (см.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> выше). Не забывайте о возможности стиля (напр. <code> clear </code> ) для <code> br </code> элемента.<hr/> Обновление от 25.06.2020 Я хочу еще раз опубликовать и объяснить цитату из рекомендаций WHATWG (см. выше): <blockquote> Если абзац состоит только из одного элемента <code> br </code>, он представляет собой пустую строку-заполнитель .</blockquote> Это выглядит так:<pre> p{граница:1px пунктирная красная} </pre><pre> 1. пример: <code> </code> <б>2. пример: <code>Я линия </code> Я линия <б>3. пример: <code></code> </pre> Регистр в первом примере означает, что этот представляет пустую строку-заполнитель . И это а не пустой ! Почему? Потому что пустая строка-заполнитель имеет некоторые свойства размера шрифта.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> В другом случае будет как в третьем примере — пусто . Случай во втором примере показывает нам два элемента <code> br </code> в конце блочного элемента, и мы видим, что последний элемент <code> br </code> был проигнорирован, но второй элемент <code> br </code> с конца имеет свою собственную строку. Пользователь kalkronline снова провел исследование , но нашел неверное объяснение с неправильным толкованием от пользователя Rei . Объяснение от пользователя Rei только на первый взгляд логично, но если мы прочитаем то, что я написал, то увидим, что он сделал логических ошибок . Мой второй пример показывает нам ошибку пользователя Rei , потому что по его описанию у нас должна быть пустая строка. Цитата пользователя Рей неправильное толкование:<blockquote> Поскольку в строке нет символов, она отображается как пустая строка. </blockquote> Но это потому, что в этом блочном элементе после него не следуют никакие элементы! <h3> Заключение </h3> Я хотел бы написать несколько правил для вашего конвертера:<ol><li> Если абзац состоит только из одного элемента <code> br </code>, он представляет собой пустую строку-заполнитель (из рекомендаций WHATWG)</li><li> Все элементы <code> br </code> в конце элементов блока, если после них ничего не следует, следует игнорировать.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> Только последний элемент <code> br </code> из двух или более элементов <code> br </code> в конце элементов блока должен игнорироваться. Но предыдущие элементы <code> br </code> должны иметь собственную строку с высотой размера шрифта.</li><li> Вы должны следовать всем рекомендациям WHATWG.</li></ol><hr/> Полезные ссылки: <ul><li> WHATWG: Элемент 9 br0006</li><li> <code> </code> : Элемент разрыва строки (MDN) </li><li> WHATWG: Уровень жизни HTML. Определение «<code> </code>» в этой спецификации. </li><li> <code> </code> : Элемент абзаца (MDN) </li><li> Я и другие. 1971 СССР (очень хороший документальный фильм о логических ошибках и манипулировании сознанием с английскими субтитрами(включите их))</li></ul> 4 Элемент <code> </code> имеет единственную, четко определенную цель — создать разрыв строки в текстовом блоке.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript><blockquote> Разрыв строки определяется как возврат каретки (<code> </code>), перевод строки (<code> </code>) или возврат каретки/строки кормовая пара. Все разрывы строк представляют собой пробелы.</blockquote> https://www.w3.org/TR/REC-html40/struct/text.html#line-breaks<hr/> Давайте выполним тест грубой силы, чтобы увидеть, какие теги отображают <code> </code> в конце, а какие нет. https://jsfiddle.net/t7bnokzc/1/ Мы видим, что эти теги полностью игнорируют последние <code> </code>, т.к. не переходят на следующую строку, а показывают текст сразу после них.<pre> <кнопка> <холст> <изображение> <iframe> <ввод> <рубин> <метр> <прогресс> <выбрать> <svg> <текстовое поле> <видео> </pre> При этом эти теги игнорируют последние <code> </code> :<pre> <адрес> <статья> <в сторону> <audio> // Имеет высоту и ширину по умолчанию, отличается от браузера к браузеру <цитата> <центр> <список данных> <дд> <детали> <каталог> <дел> <дл> <дт> <набор полей> <figcaption> <рисунок> <нижний колонтитул> <форма> <h2> </h2><заголовок> <легенда> <li> <основной> <навигация> <ол> <оптгруппа> <опция> <р> <пред> <раздел> <резюме> <ул> </pre> Что общего между перечисленными выше? У них есть либо display:block </code> <code>, либо display:list-item </code> <code>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Заключение: Если вы поместите разрыв строки в конце элемента, который не отображает разрывы строк (список выше), или элемента, в конце которого есть элемент, который не отображает разрывы строк, он получает игнорируется. Другой пример:<pre> <адрес>Здравствуйте! ддг ддг </адрес> </pre> Зная, что тег адреса <code> </code> является блочным элементом, он ведет себя точно так же, как тег <code> p </code>, зная, что тег <code> b </code> ведет себя как тег <code> a </code>: они отображают последний разрыв строки, если он не заканчивается внутри блока элемент. 2 Пожалуйста, взгляните на мой более информированный, обновленный ответ. <hr/> Вот документ W3, в котором говорится, что браузеры должны игнорировать пустые элементы p. Определение «игнорировать» довольно расплывчатое, поэтому рассмотрим следующие фрагменты:<pre> привет привет </pre> Он будет отображаться примерно так же, как ваш код:<pre> hello привет </pre> Это не означает, что элементы полностью удалены со страницы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Применение стиля показывает, что они только что были уменьшены.<pre> привет привет! </pre> Вот еще документация и несколько дополнительных ссылок, по которым можно задать похожие вопросы. W3 doc on Whitespace Изменить высоту разрывов строк Теги пустых абзацев 3 Элемент <code> br </code> ведет себя как обычный блокирующий элемент с размером 0, поэтому в ваших случаях он просто добавляет 0px к концу <code> p </code> (или <code> a </code> ). Когда другой текст следует за любым блокирующим элементом, он будет помещен под (таким образом, будет создан разрыв строки). Когда текста нет, в конце нет лишнего пробела. Это обычное поведение для редактируемого содержимого: помещать <code> br </code> в конец каждой строки, наряду с переносом каждой строки в элемент <code> p </code>. Как упоминалось в комментариях, реализация может отличаться в разных браузерах, но в конце концов логика та же, блокирующий элемент без размера.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> 3 Почему мы используем тег br — HTML-элемент br создает разрыв строки в тексте (возврат каретки) . возврат каретки или возврат — это управляющий символ или механизм, используемый для сброса позиции устройства на начало строки текста . Обратите внимание: Если вы проверите размеры тега br , он имеет ширину = 0 и некоторую высоту (~ 18 пикселей). Но если вы используете его внутри тега p , тогда тег br занимает высоту элемента p , но важно то, что его собственная ширина равна 0 . Ответ на ваш вопрос , если мы используем его как = <code>Привет </code> тогда вы сможете увидеть элемент br в консоли разработчика , но без дополнительного пробела, , потому что у нас нет текста после тега br , а его собственная ширина равна 0, поэтому общая ширина становится равной нулю.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Следовательно, он не требует дополнительного пробела или разрыва строки. Пример -<pre> р { маржа: 0; } </pre><pre> Здравствуйте Здравствуйте </pre> Но если у нас есть такой код - <code>Hello World </code> затем br tag переводит курсор в начало следующей строки, и у нас есть текст после br tag с некоторой шириной. Таким образом, мы сможем увидеть дополнительный пробел или разрыв строки. Пример -<pre> р { маржа: 0; } </pre><pre> Привет Мир Hello World </pre> И я согласен, что это неподходящее место для использования тега br , потому что элемент p автоматически добавит разрыв строки. Итак, используя br tag непосредственно перед end p tag не имеет смысла. Пожалуйста, проверьте ссылки ниже: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br https://html.spec.whatwg.org/multipage/text- level-semantics.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> html#the-br-element Из того, что я заметил, <code> </code> элементов приводят к тому, что <code> встроенных </code> элементов в конце отображаются на следующей строке. В вашем случае:<pre> Здравствуйте Здравствуйте </pre> Тег <code> </code> не может вызвать проблемы с родственным тегом <code> p </code>, поскольку по умолчанию они являются элементами <code> блока </code>. Если вы примените немного CSS:<pre> p { дисплей: встроенный; } </pre> Вы увидите, что ваш тег <code> </code> отобразит родственный тег <code> </code> для отображения на следующей строке. Я думаю, что это просто сводится к свойству <code> display </code> замыкающих <code> элементов </code> , если они <code> встроенные </code> ака. в потоке текста эти элементы <code> </code> окажутся под действием <code> </code>, в противном случае, если есть какие-либо другие визуализируемые элементы с другим свойством <code> display </code>, они не будут затронуты Это.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Как сказал @karlkronline, вполне возможно, что элементы <code> </code> отмечают конец текущей строки. И, если ваш следующий "видимый" элемент для рендеринга - это встроенный элемент <code> </code>, он перемещается на следующую строку и отображает его. Однако в случае любого другого типа, поскольку элементы по умолчанию отображаются в отдельной строке, нет смысла снова переходить на следующую строку и отображать элемент. Может быть достаточно просто увидеть, что мы уже находимся на следующей строке, поэтому игнорируем и продолжаем рендеринг. Чтобы визуализировать явный <code> </code> ч/б <code> блок </code> элементов , используйте 2 <code> </code> с. Технически они окажутся всего лишь 1 разрывом строки. Почему это сработает? Это сработает, потому что, когда сначала <code> </code> помечает его как следующую строку, визуализатор встретится с другим <code> </code>, который является <code> встроенный элемент </code> по умолчанию, поэтому переход на следующую строку имеет смысл.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Но для второго <code> </code>, когда он помечает его как следующую строку, следующим элементом будет <code> блок </code> , который уже будет отображаться в отдельной строке, поэтому игнорируется. Заключение, в форме выражения:<pre> , за которым следует <ВСТРОЕННЫЙ ЭЛЕМЕНТ> = Следующая строка, начинающаяся с <ВСТРОЕННЫЙ ЭЛЕМЕНТ> , за которым следует <БЛОК ЭЛЕМЕНТ> = игнорировать, так как <БЛОК ЭЛЕМЕНТ> все равно будет отображаться на следующей строке </pre> Нашел этот ответ, который дает объяснение гораздо более элегантное, чем я когда-либо мог придумать. Попробую обобщить и применить к вашей ситуации. Давайте еще раз посмотрим на ваш код.<pre> привет привет <ч/> привет привет </pre> Код над и под горизонтальной линейкой отображается одинаково. ПОЧЕМУ? Ну, как объясняет пользователь Rei, это потому, что «элемент BR вообще не игнорируется. Он отмечает, что линия должна быть прервана в этой точке».<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Другими словами, он отмечает конец текущей строки текста. Речь идет не о создании новых строк». Мы знаем, что он не игнорируется, потому что мы можем применять к нему стили. Как я обнаружил ранее, увеличение поля, превышающего значение по умолчанию, показывает, что разрыв все еще существует. Подумайте о том, чтобы посмотреть другой ответ для получения более подробной информации Пользователь, задавший вопрос, якобы создает аналогичную программу, и ответ содержит множество примеров и связанной документации.<code> стр. </code> и <code> div </code> являются элементами блочного уровня, так что имейте это в виду, когда будете читать пост. 4 Элементы <code> </code> всегда отображаются во всех браузерах, поскольку все браузеры выровнены в соответствии с определенной спецификацией, измененной консорциумом W3C, но в некоторых случаях их эффекты скрыты. Вы поймете, почему это так, когда получите более глубокий взгляд на то, как 9Теги 0014 </code> и <code> </code> работают в этом конкретном контексте вашего вопроса.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Итак, давайте посмотрим глубже. Тег <code> </code> — при применении после содержимого он оставляет разрыв строки, два тега <code> </code> одновременно могут оставлять одну строку пробела между видимым текстом, как видно между абзацами. Примечание: В силу конструкции тегов <code> </code>, каждый последующий тег <code> </code> после двух последовательных <code> Теги </code> будут вставлять одну пустую строку ( Примечание. Одна пустая строка обычно называется разрывом абзаца ) вместо разрыва строки. Тег <code> </code> — он гарантирует наличие пустой строки пробела по обе стороны от встроенного содержимого (Примечание. Пустые строки пробела в содержимом, которое предшествует ему или следует за ним, обрабатываются как часть самого контента). Он не принимает во внимание разрывы строк ( Примечание: Требуется два разрыва строки, чтобы оставить пустую строку пробела ( Разрыв абзаца ), т.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> е. 2 <code> </code> тегов и каждый последующий <code> </code> тегов после 2 последовательных <code> </code> тегов вместо разрыва строки вставляется пустая строка. ). Взгляните на следующие фрагменты кода. 1.<pre> Это абзац. Это абзац. </pre> В приведенном выше фрагменте кода первая строка текста находится в пределах <code> </code> тега, а второй строки нет, и он функционирует так, как я описал выше. 2.<pre> Это абзац. Это абзац. </pre> В приведенном выше фрагменте кода оба текста заключены в 2 отдельных тега <code> </code>, но между ними есть только одна пустая строка. Это связано с тем, что тег <code> </code> будет учитывать только пустые строки, которые являются частью текста/контента, оставляя при этом собственную пустую строку. Вы получите больше ясности, изучив приведенные ниже фрагменты кода. 3.<pre> Это абзац. Это абзац. </pre> В приведенном выше фрагменте кода один тег <code> </code> встроен в первый тег <code> </code> , но обратите внимание, что один тег <code> </code> не эквивалентно пустой строке пробела (требуется 2 тега <code> </code>, чтобы быть эквивалентным пустой строке пробела).<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Итак, пустая строка пробела не является частью нашего первого текстового содержимого , поэтому вы не увидите эффекта тега <code> </code>, поскольку одиночный разрыв строки не эквивалентен пробелу, а тег <code> > учитывает только предшествующие строки пробела перед вставкой собственного одиночного линия пространства. В силу дизайна тег <code> </code> будет рассматривать пустые строки пробела внутри элемента как часть этого элемента, поэтому, если элемент имеет пустые строки пробела ближе к концу, тег <code> </code> по-прежнему оставляет свою собственную единственную пустую строку, добавляя тем самым дополнительную пустую строку к уже существующим строкам пробелов содержимого. Посмотрите на следующий пример. 4.<pre> Это абзац. Это абзац. </pre> В приведенном выше фрагменте кода 2 <code> </code> тегов были вставлены внутрь первых <code> </code> тегов , поэтому он оставляет пустую строку пробела как часть первого <code> </code> тега .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> второй тег <code> </code> будет рассматривать эту пустую строку как часть содержимого в пределах first <code> </code> тег , и когда он вставляет свою собственную единственную строку пробела после предыдущего содержимого, кажется, что к нему добавлена лишняя пустая строка пробела. 5.<pre> Это абзац. Это абзац. </pre> В приведенном выше фрагменте кода вы можете видеть, что 3 тега <code> </code> являются частью первого тега <code> </code> , теперь прокрутите вверх и посмотрите при функционировании <code> > , как я описал в начале , вы можете видеть, что теперь 2 строки пустого пространства являются частью содержимого внутри first <code> </code> tag , следовательно, расстояние между <code> Теги </code> состоят из 3 пустых строк (2 пустые строки из-за 3 тегов <code> </code> и 1 пустая строка из-за последующего тега <code> </code>).<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></div></div></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/chto-takoe-elektronnaya-pochta-e-mail-elektronnaya-pochta-eto-chto-takoe-elektronnaya-pochta.html" rel="prev">Что такое электронная почта e mail: Электронная почта | это… Что такое Электронная почта?</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/html/html-navigacziya-po-stranicze-ssylki-vnutri-straniczy-htmlbook-ru.html" rel="next">Html навигация по странице: Ссылки внутри страницы | htmlbook.ru</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <a rel="nofollow" id="cancel-comment-reply-link" href="/html/br-html-teg-teg-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate>Ваш адрес email не будет опубликован. Обязательные поля помечены *<label for="comment">Комментарий *</label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea><label for="author">Имя *</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /><label for="email">Email *</label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='40351' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php"); document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_R-A-744004-7"); if (ins.clientHeight == "0") { ins.innerHTML = stroke2; } }, true); </script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2024 | Все права защищены.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>  <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>  <script defer src="https://xn--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_b4a02ea7ab06cfcb8e144b512c939c55.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="12f12cdcc047d0b0ba33dce1-|49" defer></script>

Br html тег: Тег | htmlbook.ru

HTML первые шаги — урок 2 — теги p, div и их различие. Тег br

Разрыв строки в HTML: используем тег br

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

Атрибут тега <br>

Свойства атрибута тега

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

Использование br для вставки разрывов строк в HTML: Вот как это сделать »

Не злоупотребляйте разрывами строк

Browser Support for br

Attributes of br