什么时候使用 hr 元素在语义上是正确的？答案

【问题标题】：When is it semantically correct to use the hr element?什么时候使用 hr 元素在语义上是正确的？
【发布时间】：2012-03-28 01:58:50
【问题描述】：

HTML5 reference 这么说

hr 元素表示段落级别的主题中断，例如故事中的场景变化，或参考书中某个章节中另一个主题的过渡。

那个描述对我来说不够描述。我在我的 HTML 文档中使用 hr 元素作为分隔内容的一种方式。这是正确的吗？

谁能举几个例子说明何时使用它（除了显示的示例）以及何时使用CSS 样式代替？

【问题讨论】：

Correct usage of HTML5 <hr> tag的可能重复
基本上，如果你只想画一条水平线，就不要再使用<hr>了——改用边框。

标签： css html semantic-markup

【解决方案1】：

当你有几个段落有两个不同的主题时使用它是合适的。

<p>Paragraph about domestic kittens</p>
<p>Paragraph about kittens' favourite foods</p>
<p>Paragraph about kittens' playfulness</p>
<hr>
<p>Paragraph about my day at work</p>

如果您想在图像和内容之间分开主题，我相信这也是合适的。

<img src="/img/kitten.jpg" alt="kitten playing with ball">
<img src="/img/kitten1.jpg" alt="kitten drinking milk">
<hr>
<img src="/img/zebra.jpg" alt="zebras in the wild">

hr 的新用途似乎只是用于区分 HTML 中的主题。如果您发现您的内容连接良好，请不要觉得您需要使用标签。

【讨论】：

我将第一段代码读为“关于我的小猫在工作中的部分”......我要去睡觉了。（顺便说一句，很好的第一个答案，欢迎！）

【解决方案2】：

根据this article

在 HTML 4.01 中，<hr> 标签表示水平线。

在 HTML5 中，<hr> 标签定义了一个主题中断。

但是，<hr> 标记仍可能在视觉浏览器，但现在以语义术语定义，而不是表示术语。

HTML 4.01 中的所有布局属性（对齐、noshade、大小和宽度）在 HTML 4.01 中已弃用，在 HTML5 中不受支持。使用 CSS 来改为设置 <hr> 元素的样式。

在 HTML5 中，当您从先前编写的段落中转移话题时，请使用 <hr>。

【讨论】：

【解决方案3】：

我的简短回答和解决方法是，当没有其他方法可以用 CSS 干净地完成它时，我会使用 <hr>。对我来说，这已经转化为多年编写 html 并且永远不必使用 <hr>。

最终，如果我只是想在相同内容的两个部分之间放置某种标记，我可以看到自己使用 <hr>。

以博客文章为例：当我觉得从一个主题转换到另一个主题在视觉上很重要时，我会添加 <hr>。

【讨论】：