Иногда плохо использовать <BR />?

157

Иногда плохо использовать <BR/>теги?

Я спрашиваю, потому что некоторые из первых советов, которые моя команда разработчиков дала мне, заключались в следующем: не используйте <BR/>; вместо этого используйте стили. Но почему? Есть ли отрицательные результаты при использовании <BR/>тегов?

pencilCake
источник
10
Лучший способ найти лучший ответ - пойти в свою команду разработчиков и спросить их, ПОЧЕМУ?
azamsharp
48
Неужели это внезапно неправильная попытка получить ответ от StackOverflow, а не от членов команды?
Носредна
7
Нет, просто кто-то дал ему субъективный ответ, и он просит нас угадать причину этого ... Просто иди и спроси человека, который дал тебе субъективный ответ, особенно если они рядом (в одной команде разработчиков)
Габриэль Магана
8
Обычно «первый совет» приходит, когда работник новый. Новому сотруднику не всегда хочется спрашивать "почему?" Очевидно, бывают моменты, когда лучше спросить «почему», но я думаю, что Бурак Оздоган, вероятно, понимает «почему» после прочтения этих вопросов. Или, по крайней мере, понимает, что такое HTML-сообщество в целом достаточно хорошо, чтобы обсуждать эту тему. Я бы сказал, что он сделал правильный шаг, придя сюда, чтобы спросить.
Носредна
5
Я понимаю ваш совет, и вы правы. Но дело в том, что когда вы входите в новую команду, вы получаете столько информации за короткое время. И некоторые из них только что упомянуты; как деталь, приведенная в скобках. Я хотел спросить это здесь по двум причинам: чтобы получить ответ и увидеть разные мнения, как к нему подойти. Спасибо, парни!
Карандаш торт

Ответы:

173

Основная причина неиспользования <br>- это не семантика . Если вам нужны два элемента в разных визуальных блоках, вы, вероятно, хотите, чтобы они были в разных логических блоках.

В большинстве случаев это означает, например <p>Stuff</p><p>Other stuff</p>, просто использование различных элементов, а затем использование CSS для правильного размещения блоков.

Есть случаи, когда <br>это семантически допустимо, то есть случаи, когда разрыв строки является частью данных, которые вы отправляете. На самом деле это ограничено двумя вариантами использования - поэзия и почтовые адреса.

Gareth
источник
38
Лично я бы предпочел использовать <pre/>для поэзии. Таким образом, вы явно указываете, что намерением является сохранение оригинальной композиции, включая возможные отступы.
Михал Гурни
6
@ MichałGórny поднимает хороший вопрос - <br>кажется, что это уместно только в том случае, если применяются все следующие условия: 1. Символы новой строки имеют семантическую значимость, 2. Отступы не имеют семантической значимости (в противном случае вы должны использовать a <pre>, 3. Не существует других семантически подходящих тег, как тег абзаца или заголовка. Почтовые адреса удовлетворяют всем этим трем условиям, как и тексты песен. Поэзия может нарушать условие «отступ не имеет смысла», и поэтому может быть лучше помещена в <pre>.
Марк Амери
2
Как насчет использования <br />в подписи электронной почты, таких как: <footer>Sincerely,<br />StrexCorp</footer> мнения?
JHS
109

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

Неправильное использование <br />:

<div>
   Content
</div>
<br />
<br />
<br />
<br />
<div>
     More content...
</div>

Хорошее использование <br />:

<style>
     div {
          margin-top:10px;
     }
</style>

<div>
   Content<br />
   Line break
</div>

<div>
     More content...
</div>
iamkoa
источник
4
Вы не можете просто удалить ваш <br> s и добавить CSS, потому что если вы удалили ваш <br> s нет ничего , чтобы стиль. Невероятно полезно сказать «удалите разрывы строк», не помогая (буквально) заполнить пробелы
Гарет
7
Ты прав, ямкоа, но это не объясняет почему . Следовательно, это не отвечает на вопрос. 24 голосов кажется немного.
Гонки легкости на орбите
@iamkoa Вы не объясняете почему .
Фабиан Пиконе
Я думаю, что второй вариант лучше, потому что он более чистый и более простой. Я думаю, что в этом нет необходимости, используйте br
simon
26

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

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

fengb
источник
13

Вероятно, ваша команда имела в виду не использовать разделители для разделения абзацев.

<p>I am a paragraph</p>
<p>I am a second paragraph</p>

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

Пекка
источник
9

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

Используйте <br/>для разрыва строк в блоке текста и CSS, если вы хотите повлиять на макет.

Дитер Г
источник
4

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

Мартин Беккет
источник
2

Как правило, я всегда буду устанавливать соответствующие поля и отступы для элементов с помощью CSS - это намного менее грязно, чем множество <br />s везде, кроме того, что это более семантически правильно.

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

Как и большинство вещей, <br />они не так уж плохи, если их правильно использовать.

BlissC
источник
1

Я пытаюсь написать свою разметку так, чтобы она была легко читаемой при отключенном CSS. Если вы просто используете BR, чтобы добавить интервал, лучше использовать поля и отступы.

BStruthers
источник
1

<br />следует использовать только для разрывов строк, а не для применения стиля к странице. Например, если вам нужно дополнительное пространство между абзацами, присвойте им класс и примените дополнительный отступ к абзацам. Не распространяйте свои пункты с<br /><br ><br />

Zoe
источник
1

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

<br style="clear: both;">
BalusC
источник
1
Хотя этот метод используется, он не является допустимым XHTML.
iamkoa
2
Вы часто можете обойти этот «хак», используя overflow:autoвместо этого содержащий элемент.
mpen
2
@iamkoa: я не использую XHTML. HTML это HTML, а не XML.
BalusC
1

Не используйте три или более последовательных <br>s, это сигнал, что вы используете их в стилистических целях, и нет, вы не должны.

Кто-то скажет, что достаточно одного <br>, и вместо двух вы должны использовать <p></p>, но есть ситуации (например, сценарии), в которых вы хотите ввести более длительную паузу, не подразумевая смену темы или начало нового периода, как обычно делает абзац.

Zjr
источник
0

Они в порядке, если используются надлежащим образом. Например, вы не должны использовать их вместо <p>тегов или создавать интервалы между элементами. Вы, вероятно, делаете что-то не так, если у вас есть два подряд.

mpen
источник
0

Если вы делаете это: <BR/> <BR/>

Вы получите различные макеты в разных браузерах.

Глубже:
если вы используете <BR/>только для разрывов строк - хорошо.
Если вы используете <BR/>в качестве проставки строки - не хорошо.

GY
источник
0

Вот пример того, как <br>может негативно повлиять на стиль (запустить фрагмент для визуальных элементов)

(обратите внимание на смещенную кнопку и нечетное место справа):

button {
  width: 70px;
  height: 70px;
}
#arrows {
  border: solid thin red;
  display: inline-block;
}
#arrows span:first-of-type { 
  text-align: center; 
  display: block;
}
#moveUp {
  margin: 0;
}
/* In the current case instead of <br> use display */
/*
#arrows span:last-of-type { 
  display: block;
}
*/
<div id="arrows">
  <span>
    <button id="moveUp" value="üles">&uarr;</button> 
  </span>
  <button id="moveLeft" value="vasakule">&larr;</button> 
  <button id="moveDown" value="alla">&darr;</button> 
  <button id="moveRight" value="paremale">&rarr;</button> 
  <br>    <!-- note the shifted button and odd space on right -->
  <span>or move with keyboard arrows</span>
</div>

mhpreiman
источник
-2

В HTML (до HTML - 4): использование <br>
В HTML 5: <br> является предпочтительным, но <br/>и <br />также приемлемо
В XHTML: <br /> является предпочтительным. Можно также использовать <br/>или<br></br>

Так что использование <br>тега - это совершенно правильный HTML. Но использование <br>не рекомендуется?

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

<p>some<br>text<p>

может быть размечен без <br>как

 <p>some</p>
 <p>text<p>

Если вы используете <br>другую цель, такую ​​как верхний интервал и т. Д., Это может быть достигнуто через marginсвойство CSS .

Аамир Шахзад
источник
1
Обратите внимание, что использование <p> добавит ~ 16px поля сверху и снизу. Установите для каждого поля тега <p> значение 0px, чтобы избежать расстояния между строками с большей высотой, чем следовало бы.
Сатбир Кира