Следует ли любой ценой избегать <br /> и <hr /> в веб-дизайне?

Интересный вопрос. Я всегда использовал <br/> как возврат каретки (и, следовательно, как часть контента, на самом деле). Не уверен, что это правильный путь, но он мне хорошо послужил.

<hr/> с другой стороны ...

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

Использование <hr /> на сайте в качестве дизайна было бы недостатком дизайна, но в этом посте, например, было бы правильно использовать и <br />, и <hr />, поскольку этот раздел текста все равно должен быть разделом текста, даже если изменилась верстка сайта.

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

Если не хотите быть пуристом, воспользуйтесь ими :)

Думаю, вам редко понадобится тег BR в ваших шаблонах. Но иногда это может быть вызвано содержанием, созданным пользователями и системой. Например, если вы хотите сохранить фрагмент текста в абзаце, но перед ним нужно поставить новую строку.

В каких случаях вы чувствуете, что вынуждены использовать теги BR?

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

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

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

Нет почему? Это полезные конструкции.

Добавление этого дополнения (с сопровождающим его персоналом) на тот случай, если мой краткий ответ будет истолкован как недостаточно продуманный. ;)

Это может быть и часто является невероятной тратой времени - время, которое обычно платит кто-то другой - попытка придумать кроссбраузерные решения с ограничением CSS для проблем пользовательского интерфейса, которые могут решить за две секунды. Почему некоторые специалисты по пользовательскому интерфейсу тратят так много времени, пытаясь придумать «чистые» способы обхода, используя проверенные конструкции HTML, такие как разрывы строк и горизонтальные правила, для меня полная загадка; оба тега, среди многих других, являются полностью законными и действительно могут быть использованы вами. «Чистый» в этом смысле - ерунда.

Один дизайнер, с которым я работал, просто не мог заставить себя это сделать; он тратил часы, иногда дни, пытаясь «закодировать» это, и все равно придумывал что-то, что не работало в Opera. Я обнаружил, что это совершенно сбивает с толку. Чувак, добавь BR, готово. Абсолютно легально, работает как шарм, и все довольны.

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

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

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

Не каждый разрыв строки является началом нового абзаца, и упаковка текста в <div> (например) просто для того, чтобы избежать <br>, кажется мне излишне параноидальной. Почему они тебя беспокоят?

Это плохое использование, если вы идете строго.

<br/> и <hr/> не являются частью контента. Например, <hr/> обычно используется для разделения блоков текста. Но это невозможно с нижней границей? И <br/> во многих случаях рассматривается как способ ограничить текст определенной формой, чего нельзя было достичь с помощью css?

Конечно, вы не станете Строгим, не волнуйтесь особо.

Я считаю, что использование абсолютно избегая общепринятого решения (даже если оно устарело) - это то же самое, что проектирование таблицы с тегами <div> вместо тегов <table>, просто чтобы вы могли использовать <div>.

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

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

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

<p>
  ...lengthy first paragraph...
  <br/>
  <br/>
  ...lengthy second paragraph...
  <br/>
  <br/>
  ...lengthy third paragraph...
</p>

Что касается адреса, я бы сделал это так:

<address class = "address">
  <span class = "street">1100 N. Wullabee Lane</span><br/>
  <span class = "city">Pensacola</span>, <span class = "state">Florida</span> 
  <span class = "zip">32503</span>
</address>

Но это, вероятно, потому, что я люблю jQuery и хотел бы получить доступ к любой из этих частей в любой момент :)

Нет ничего плохого в использовании <br /> или <hr />. Ни один из них не является устаревшим тегом, даже в новой черновой спецификации HTML 5 (соответствующий информация о спецификациях). На самом деле, трудно утверждать правильное использование тега <br /> лучше, чем сам W3C:

The following example is correct usage of the br element:

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br elements must not be used for separating thematic groups in a paragraph.

The following examples are non-conforming, as they abuse the br element:

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.<a></p>

<p>Name: <input name = "name"><br>
Address: <input name = "address"></p>

Here are alternatives to the above, which are correct:

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.<a></p>

<p>Name: <input name = "name"></p>
<p>Address: <input name = "address"></p>

<hr /> также может быть частью контента, а не только элементом отображения. Когда дело доходит до содержания, используйте здравый смысл, и вы будете знать, когда использовать эти элементы. Оба они являются действительными и полезными элементами в текущих спецификациях W3C. Но с большой силой приходит большая ответственность, поэтому используйте их правильно.

Изменить 1:

Еще одна мысль, которая у меня возникла после того, как я впервые нажала кнопку «post», - в последние годы среди веб-разработчиков было много настроений против <table>, и не без оснований. Люди злоупотребляли тегом <table>, используя его для верстки и форматирования сайта. Это не то, для чего он нужен, поэтому вы не должны использовать его таким образом. Но означает ли это, что вам следует никогда использовать тег <table>? Что, если у вас действительно есть таблица качества в вашем коде, например, если вы пишете научную статью и хотите включить периодическая таблица элементов? В этом случае использование <table> полностью оправдано, оно становится семантической разметкой вместо форматирования. То же самое и с <br />. Когда это часть вашего контента (то есть текст, который должен разрываться в этих местах, чтобы быть правильным английским), используйте его! Когда вы делаете это просто из соображений форматирования, лучше всего попробовать другой способ.

Я вставляю <hr style = "display:none"> между разделами. Например, между столбцами в многоколоночном макете. В браузерах без поддержки CSS разделение по-прежнему будет четким.

BR в порядке, поскольку жесткий разрыв строки может быть частью содержимого, например, в блоках кода (даже если вы, вероятно, использовали бы для этого элемент PRE) или тексте песен.

С другой стороны, HR является чисто презентационным: горизонтальная линия, горизонтальная линия. Вместо этого используйте border-top / bottom для соседних элементов.

Я лично считаю, что в интересах истинного разделения содержания и стиля следует избегать как <br />, так и <hr />.

Что касается отказа от тегов <br /> в моей собственной разметке, я использую <div> в сочетании со свойством css margin для обработки всего, что требует разрыва строки, и <span> для всего, что было бы встроенным, но с другим «классом содержимого». (явно различая их по атрибуту class).

Чтобы заменить тег <hr /> на css, я просто создаю <div> со свойством css border-top-style, установленным на solid, а остальные три стороны - на none. Свойства margin и padding упомянутого <div> затем обрабатывают фактическое размещение / позиционирование горизонтальной линии.

Как я уже сказал, я не эксперт, мой опыт веб-дизайна в основном является побочным эффектом моей работы со страницами JSP (я программист на Java), но я столкнулся с этим вопросом во время некоторого исследования и хотел вложить свои два цента в ...

HR прямо сейчас использует некоторые хакерские приемы для предотвращения срабатывания алгоритмов надувания шрифтов в мобильных браузерах.

Кроме того, если у вас есть много небольшого контента, разделенного HR, Googlebot в настоящее время будет рассматривать его как «N отдельных записей», что может быть вам полезно.

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

Вы можете использовать <br>, но не использовать <hr>.

<BR> - LINE BREAK
— это отображаемая информация. Еще в обычное использование, но использование с ограничениями.

<HR> - ГОРИЗОНТАЛЬНОЕ ПРАВИЛО
- Отображать информацию без семантического значения - никогда не используйте это. «Горизонтальность» по определению является визуальным признаком.

Источник: Руководство по правильному использованию HTML-тегов

Вот отрывок из курса, который поможет вам изучить html.

<form>
    <p>Choose your pizza toppings:</p>
    <label for = "cheese">Extra cheese</label>
    <input id = "cheese" name = "topping" type = "checkbox" value = "cheese">
    <br>
    <label for = "pepperoni">Pepperoni</label>
    <input id = "pepperoni" name = "topping" type = "checkbox" value = "pepperoni">
    <br>
    <label for = "anchovy">Anchovy</label>
    <input id = "anchovy" name = "topping" type = "checkbox" value = "anchovy">