Html 在网页设计中应该不惜一切代价避免 <br /> 和 <hr /> 吗？

Should <br /> and <hr /> be avoided at all costs in web design?

提问by Micah

I continuously find places where I need to use the <br />tag because CSS can't do what I need. Isn't the <br />considered part of the "design" and not part of document structure? What is the acceptable usage for it? Should the same rules also apply to the <hr />?

我不断地寻找需要使用<br />标签的地方，因为 CSS 不能满足我的需求。不是<br />“设计”的考虑部分而不是文档结构的一部分吗？它的可接受用途是什么？相同的规则是否也适用于<hr />?

Here is an example of where I feel forced to use the <br />tag:

这是我觉得被迫使用<br />标签的一个例子：

I want to display this:

我想显示这个：

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

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

like this:

像这样：

1234 south east main st.
Somewhere, Id 54555

回答by Joshua Carmody

There is nothing wrong with using <br /> or <hr />. Neither of them are deprecated tags, even in the new HTML 5 draft spec (relevant spec info). In fact, it's hard to state correct usage of the <br /> tag better than the W3C itself:

使用 <br /> 或 <hr /> 没有错。它们都不是不推荐使用的标签，即使在新的 HTML 5 草案规范（相关规范信息）中也是如此。事实上，很难比 W3C 本身更好地说明 <br /> 标签的正确用法：

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>

以下示例是 br 元素的正确用法：

<p>P。谢尔曼<br>
42 Wallaby Way<br>
悉尼</p>

br 元素不得用于分隔段落中的主题组。

以下示例不符合标准，因为它们滥用了 br 元素：

<p><a ...>34 条评论。</a><br>
<a ...>添加评论。<a></p>

<p>姓名：<input name="name"><br>
地址：<input name="address"></p>

以下是上述的替代方案，它们是正确的：

<p><a ...>34 条评论。</a></p>
<p><a ...>添加评论。<a></p>

<p>姓名：<input name="name"></p>
<p>地址：<input name="address"></p>

<hr /> can very well be part of the content as well, and not just a display element. Use good judgement when it comes to what is content and what is not, and you'll know when to use these elements. They're both valid, useful elements in the current W3C specs. But with great power comes great responsibility, so use them correctly.

<hr /> 也可以成为内容的一部分，而不仅仅是显示元素。当涉及到什么是内容，什么不是内容时，请使用良好的判断力，您就会知道何时使用这些元素。它们都是当前 W3C 规范中有效、有用的元素。但权力越大责任越大，所以请正确使用它们。

Edit 1:

编辑1：

Another thought I had after I first hit "post" - there's been a lot of anti-<table> sentiment among web developers in recent years, and with good reason. People were abusing the <table> tag, using it for site layout and formatting. That's not what it's for, so you shouldn't use it that way. But does that mean you should neveruse the <table> tag? What if you actually have an honest-to-goodness table in your code, for example, if you were writing a science article and you wanted to include the periodic table of the elements? In that case, the use of <table> is totally justified, it becomes semantic markup instead of formatting. It's the same situation with <br />. When it's part of your content (ie, text that should break at those points in order to be correct English), use it! When you're just doing it for formatting reasons, it's best to try another way.

我第一次点击“发布”后的另一个想法 - 近年来，Web 开发人员中有很多反<table> 情绪，这是有充分理由的。人们滥用 <table> 标签，将其用于网站布局和格式设置。这不是它的用途，所以你不应该那样使用它。但这是否意味着您永远不应该使用 <table> 标签？如果您的代码中确实有一个诚实善良的表格，例如，如果您正在撰写一篇科学文章并且想要包含元素周期表，该怎么办？? 在这种情况下，使用 <table> 是完全合理的，它变成了语义标记而不是格式化。<br /> 也是同样的情况。当它是您内容的一部分时（即，应该在这些点中断以使用正确的英语的文本），请使用它！当您只是出于格式化原因而这样做时，最好尝试另一种方式。

回答by Sampson

Just so long as you don't use <br/> to form paragraphs, you're probably alright in my book ;) I hate seeing:

只要你不使用 <br/> 来形成段落，你在我的书中可能没问题;) 我讨厌看到：

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

As for an address, I would do it like this:

至于地址，我会这样做：

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

But that's likely because I love jQuery and would like access to any of those parts at any given moment :)

但这可能是因为我喜欢 jQuery 并且想在任何特定时刻访问任何这些部分:)

回答by George Stocker

<hr />and <br />, much like everything else, can be abused to do design when they shouldn't be. <hr />is meant to be used to visually divide sections of text, but in a localized sense. <br />is meant to do the same thing, but without the horizontal line.

<hr />并且<br />，就像其他所有东西一样，在不应该被滥用的情况下可能会被滥用来进行设计。 <hr />旨在用于在视觉上划分文本部分，但具有本地化的意义。 <br />是为了做同样的事情，但没有水平线。

It would be a design flaw to use <hr />across a site as a design, but in this post, for instance, it would be correct to use both <br />and <hr />, since this section of text would still have to be a section of text, even if the site layout changed.

<hr />在整个网站上使用作为设计将是一个设计缺陷，但在这篇文章中，例如，同时使用<br />和是正确的<hr />，因为这部分文本仍然必须是一部分文本，即使站点布局已更改。

回答by Andrew Hare

<hr/>and <br/>are presentational elements that have no semantic value to the document, so from a purist perspective yes, they ought to be avoided.

<hr/>和<br/>是对文档没有语义价值的表现元素，所以从纯粹的角度来看，是的，应该避免它们。

Think about HTML not as a presentational tool but rather as a document that needs to be self-describing. <hr/>and <br/>add no semantic value - rather they represent a very specific presentation in the browser.

不应将 HTML 视为一种展示工具，而是将其视为需要自我描述的文档。 <hr/>并且不<br/>添加语义值——而是它们代表浏览器中非常具体的呈现。

That all being said, be pragmatic in your approach. Try to avoid them at all cost but if you find yourself coding up the walls and across the ceiling to avoid them then its better to just go ahead and use them. Semantics are important but fringe cases like this are not where they matter the most.

话虽如此，请务实地对待您的方法。尽量避免它们，但如果你发现自己在墙壁和天花板上编码以避免它们，那么最好继续使用它们。语义很重要，但像这样的边缘案例并不是它们最重要的地方。

回答by Aron Rotteveel

I believe absolutely avoidingusage of a commonly accepted solution (even it is outdated) is the same thing as designing a table with <div>tags instead of <table>tags, just so you can use <div>.

我相信绝对避免使用普遍接受的解决方案（即使它已经过时）与设计带有<div>标签而不是<table>标签的表格是一回事，这样您就可以使用<div>.

When designing your website, you probably won't requirethe use of <br />tags, but I can still imagine them being useful where user input is needed, for example.

在设计您的网站时，您可能不需要使用<br />标签，但我仍然可以想象它们在需要用户输入的地方很有用，例如。

I don't see anything wrongwith using <br />but have not come across many situation where I requiredusing them. In most cases, there probably are more elegant (and prettier) solutions than using <br />tags if this is what you need for vertically seperating content.

我认为使用没有任何问题，<br />但没有遇到许多需要使用它们的情况。在大多数情况下，<br />如果这是垂直分隔内容所需要的，那么可能有比使用标签更优雅（更漂亮）的解决方案。

回答by user35612

I put in a <hr style="display:none">between sections. For example, between columns in a multi-column layout. In browsers with no support for CSS the separation will still be clear.

我<hr style="display:none">在部分之间放置了一个。例如，多列布局中的列之间。在不支持 CSS 的浏览器中，分离仍然很清晰。

回答by Christian Nunciato

No. Why? They're useful constructs.

没有为什么？它们是有用的构造。

---

---

Adding this addendum (with accompanying HR), in case my brief answer is construed as lacking appropriate consideration. ;)

添加此附录（随附 HR），以防我的简短回答被解释为缺乏适当考虑。;)

It can be, and often is, an incredible waste of time -- time someone else is usually paying for -- trying to come up with cross-browser CSS-limited solutions to UI problems that BR and HR tags, and their likes, can solve in two seconds flat. Why some UI folks waste so much time trying to come up with "pure" ways of getting around using tried-and-true HTML constructs like line breaks and horizontal rules is a complete mystery to me; both tags, among many others, are totally legitimate and are indeed there for you to use. "Pure," in that sense, is nonsense.

这可能是，而且经常是，令人难以置信的浪费时间——其他人通常会为此付出的时间——试图为 BR 和 HR 标签及其喜欢的 UI 问题提出跨浏览器的 CSS 限制解决方案两秒内解决。为什么一些 UI 人员浪费这么多时间试图想出“纯粹”的方法来使用经过验证的 HTML 结构（例如换行符和水平线），这对我来说是一个完全的谜；除了许多其他标签外，这两个标签都是完全合法的，确实可供您使用。从这个意义上说，“纯粹”是无稽之谈。

One designer I worked with simply could not bring himself to do it; he'd waste hours, sometimes days, trying to "code" around it, and still come up with something that didn't work in Opera. I found that totally baffling. Dude, add BR, done. Totally legal, works like a charm, and everyone's happy.

一位与我共事的设计师根本无法让自己去做。他会浪费几个小时，有时是几天，试图围绕它“编码”，但仍然想出一些在 Opera 中不起作用的东西。我发现这完全令人困惑。伙计，添加 BR，完成。完全合法，效果很好，每个人都很开心。

I'm all for abstracting presentation, don't get me wrong; we're all out do to the best work we can. But be sensible. If you've spent five hours trying to figure out some way to achieve, in script, something that BR gives you right now, and the gods won't rain fire down on you for doing it, then do it, and move on. Chances are if it's that problematic, there might be something wrong with your solution, anyway.

我完全是为了抽象演示，不要误会我的意思；我们全力以赴，尽我们所能。但要理智。如果你花了五个小时试图找出某种方法来实现，在脚本中，BR 现在给你的东西，众神不会因为你这样做而对你下火，那就去做，然后继续前进。如果它有问题，无论如何，您的解决方案可能有问题。

回答by Tomalak

<br>is the HTML way of expressing a line break, as there is no other way of doing it.

<br>是表示换行符的 HTML 方式，因为没有其他方式可以做到这一点。

Physical line breaks in the source code are rightfully ignored (more correctly: treated as a single white space), so you need a markup way to express them.

源代码中的物理换行符被理所当然地忽略了（更正确的是：将其视为单个空格），因此您需要一种标记方式来表达它们。

Not every line break is the beginning of a new paragraph, and packing text into <div>s (for example) just to avoid <br>s seems overly paranoid to me. Why do they bother you?

并非每个换行符都是新段落的开始，将文本打包到<div>s（例如）只是为了避免<br>s 对我来说似乎过于偏执。他们为什么要打扰你？

回答by Keltia

I'd not say at all costsbut if you want to be purist, these tags have nothing to do with structure and everything to layout but HTML is supposed to separate content from presentation. <hr />can be done through CSS and <br/>through proper use of otehr tags like <p>.

我不会说不惜一切代价，但如果你想成为纯粹主义者，这些标签与结构无关，一切都与布局无关，但 HTML 应该将内容与展示分开。 <hr />可以通过 CSS 和<br/>正确使用 otehr 标签（如<p>.

If you do not want to be a purist, use them :)

如果您不想成为纯粹主义者，请使用它们:)

回答by PEZ

I think you should seldom need the BR tag in your templates. But at times it can be called for in the content, user generated and system generated. Like if you want to keep a piece of text in the paragraph but need a newline before it.

我认为您的模板中应该很少需要 BR 标签。但有时它可以在内容、用户生成和系统生成中调用。就像你想在段落中保留一段文本但需要在它之前换行一样。

What are the occasions where you feel you are forced to use BR tags?

在什么情况下您觉得自己被迫使用 BR 标签？