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

Question

Я постоянно нахожу места, где мне нужно использовать тег <br />, потому что CSS не может делать то, что мне нужно. Разве <br /> не считается частью "дизайна", а не частью структуры документа? Какое это допустимое использование? Должны ли те же правила также применяться к <hr />?

Вот пример, где я чувствую себя вынужденным использовать тег <br />:

Я хочу отобразить это:

<address>1234 south east Main St. Somewhere, Id 54555</address>

как это:

1234 south east main st.
Somewhere, Id 54555

Answer 1

В использовании
или

---

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

В следующем примере показано правильное использование элемента br:

P. Шерман

42 Wallaby Way

Сидней

Элементы

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

Следующие примеры являются несоответствующими, поскольку они используют элемент br:

34 комментария.

Добавить комментарий.

Имя:

Адрес:

Вот правильные альтернативы вышеприведенному:

34 комментария.

Добавить комментарий.

Имя:

Адрес:

---

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

Редактировать 1:

Еще одна мысль, которая возникла у меня после того, как я впервые прочитал «пост», - в последние годы среди веб-разработчиков было много настроений против

Answer 2

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

<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 и хотел бы получить доступ к любой из этих частей в любой момент:)

Answer 3

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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

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

Answer 7

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

Answer 8

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

---

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

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

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

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

Answer 9

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

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

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

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

Answer 10

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

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