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

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

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

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

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

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

Я думаю, что ваша команда разработчиков использует <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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<br style="clear: both;">

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

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

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

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

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

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

Вот пример того, как <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>

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