Тэг br, а так ли он нужен?

Вы здесь

Главная → Блог → HTML → Тэг br, а так ли он нужен?

Раздел: 

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

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

<ul>
   <li>Строка Списка первая</li>
   <li>Строка Списка вторая</li>
   <li>Строка Списка третья</li>
</ul>

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

Строка Списка первая<br/>
Строка Списка вторая<br/>
Строка Списка третья<br/ >

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

Где не нужен br

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

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

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

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

<p> использовать тэг <pre>.

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

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

p {
    white-space: 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:

    span {
   display: block;
}

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

Ключевые слова: 

Семантическая верстка

Еще интересное

— HTML — Дока

По мере развития стандарта HTML в него добавлялись новые теги и убирались неактуальные. В HTML5 большой упор был сделан на семантический смысл тегов, а всё, что касалось визуальной составляющей, было отдано на откуп CSS. То есть теперь использование тех или иных тегов определяется их функциональным назначением, а не тем, как тег влияет на внешний вид элемента.

С переходом на стандарт HTML5 из перечня тегов были исключены практически все оформительские (например, <small> или <font>). При этом разработчики стандарта оставили довольно спорный тег <br>. Спорный потому, что часто у разработчиков нет полного понимания, когда его следует применять.

Правильное применение тега

Скопировано

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

<p>  Мой дядя самых честных правил,<br>  Когда не в шутку занемог,<br>  Он уважать себя заставил<br>  И лучше выдумать не мог.</p>
          <p>
  Мой дядя самых честных правил,<br>
  Когда не в шутку занемог,<br>
  Он уважать себя заставил<br>
  И лучше выдумать не мог.
</p>

Ещё одним примером может служить вёрстка почтового адреса, когда принципиально разнести части адреса по разным строкам:

<address>  432000<br>  г.  Ульяновск<br>  ул. Ленина, д. 34</address>
          <address>
  432000<br>
  г. Ульяновск<br>
  ул. Ленина, д. 34
</address>

Обратите внимание: в обоих примерах текст является связанным. Другими словами, каждая новая строка по смыслу является частью всего текста.

Случаи неправильного применения тега

Скопировано

Неправильное объединение элементов в группу

Скопировано

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

Неправильно:

<p>  <label>Имя: <input name="name"></label><br>  <label>Адрес: <input name="address"></label></p>
          <p>
  <label>Имя: <input name="name"></label><br>
  <label>Адрес: <input name="address"></label>
</p>

Правильно:

<p><label>Имя: <input name="name"></label></p><p><label>Адрес: <input name="address"></label></p>
          
 
<p><label>Имя: <input name="name"></label></p>
<p><label>Адрес: <input name="address"></label></p>

Вертикальные отступы

Скопировано

Ещё один пример неправильного употребления тега — использование его в декоративных целях: для задания вертикальных отступов между элементами. Вертикальные отступы — часть визуального оформления страницы, и должны задаваться исключительно в CSS.

Неправильно:

<article>  <h3>Контейнеровоз сел на мель в Суэцком канале</h3>  <p>...</p></article><br><br><article>  <h3>Во всём мире наблюдается дефицит чипов</h3>  <p>...</p></article>
          <article>
  <h3>Контейнеровоз сел на мель в Суэцком канале</h3>
  <p>...</p>
</article>
<br>
<br>
<article>
  <h3>Во всём мире наблюдается дефицит чипов</h3>
  <p>...</p>
</article>

Правильно с использованием CSS:

<article>  <h3>Контейнеровоз сел на мель в Суэцком канале</h3>  <p>...</p></article><article>  <h3>Во всём мире наблюдается дефицит чипов</h3>  <p>...</p></article>
          
 
<article>
  <h3>Контейнеровоз сел на мель в Суэцком канале</h3>
  <p>. ..</p>
</article>
<article>
  <h3>Во всём мире наблюдается дефицит чипов</h3>
  <p>...</p>
</article>

article {  margin-bottom: 2em;}
          article {
  margin-bottom: 2em;
}

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

Открыть демо в новой вкладке

Переносы в заголовках

Скопировано

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

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

Например, при адаптивной вёрстке слова в заголовке перестроятся, а разрыв строки никуда не денется. В результате заголовок будет вести себя неестественно: слова перенесутся не там, где должны.

Открыть демо в новой вкладке

Попробуйте поизменять ширину окна в примере выше. Во втором блоке мы видим, что заголовок неестественно разрывает строки на малой ширине. Всё потому, что через CSS мы не можем управлять поведением <br>, и этот тег продолжает разрывать строку, несмотря ни на что.

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

html — Как сделать разрыв строки из css без использования ?

спросил

Изменено 3 месяца назад

Просмотрено 1,4 млн раз

Как добиться такого же результата без
?

 
привет 
 Как дела

вывод: 

привет
Как вы
  • html
  • css
  • разрывы строк

Вы можете использовать пробел : pre; , чтобы элементы действовали как 

  , что сохраняет новые строки.  Пример: 
 
 п {
  пробел: предварительно;
} 
 
привет
Как дела?
 
 Примечание для IE: это работает только в IE8+.
 4
 Невозможно с одинаковой структурой HTML, у вас должно быть что-то, чтобы различать  Привет  и  Как дела  .
 Я предлагаю использовать  span  s, которые вы затем будете отображать в виде блоков (точно так же, как 
  на самом деле).
 п пролет {
  дисплей: блок;
} 
 
приветКак дела
 
 8
 Используйте 
 
  как обычно, но скройте его с помощью  display: none , когда он вам не нужен.
 Я ожидаю, что большинство людей, которые найдут этот вопрос, захотят использовать css / адаптивный дизайн, чтобы решить, появляется ли разрыв строки в определенном месте. (и не имейте ничего личного против  
  )
 Хотя это и не очевидно сразу, вы можете применить  display:none  к тегу  
 , чтобы скрыть его, что позволяет использовать медиа-запросы в тандеме с семантическими тегами BR.
 <дел>
  Быстрая коричневая лиса

  перепрыгивает через ленивую собаку


 
 @экран мультимедиа и (минимальная ширина: 20em) {
  бр {
    дисплей: нет; /* скрываем тег BR для более широких экранов (т.е. отключаем перенос строки) */
  }
}

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

пример jsfiddle

7

Существует несколько вариантов определения обработки пробелов и разрывов строк. Если можно поместить содержимое, например.

тег довольно легко получить все, что угодно.

Для сохранения разрывов строк, но не пробелов, используйте до строки (не до ), например: