如果我需要在<hr />或额外的包装器<div>?</div>之间进行选择,哪个更具语义性

时间:2011-05-12 11:53:23

标签: html html5 xhtml semantic-markup

要在我正在工作的一个特定设计中制作分隔符,我需要在多个元素组之间进行分隔。我只有两个选项:我可以在<div>内包装元素(内部元素的高度不相同),或者我可以使用<hr>

如果我使用额外的div,则只会制作一个分隔符。

哪个更加语义,一个额外的divhr

2 个答案:

答案 0 :(得分:7)

如果分界线是内容的一部分,那么<hr>绝对是合适的答案。

但是,分界线可以被视为设计元素,在这种情况下它不应该在HTML代码中;设计应该在样式表中完成。

所以问题是你打算绘制的分界线是否是内容或设计的一部分?

您可以通过考虑删除分隔线是否会影响内容来回答此问题,方法与删除<br>代码的方式相同。或者考虑是否必须将内容提供给其他人在其他地方发布,是否要将分界线作为发送内容的一部分。如果答案为“是”,那么它们就是您内容的一部分。

如果它纯粹是你的页面设计的情况,那么你应该使用样式表来添加分隔符,因为尽管<hr>更具语义,但只有在它构成内容的活动部分时它才是语义正确的。 / p>

答案 1 :(得分:2)

您说您可以将内部元素包装在<div>中,但<div>仅用作分隔符。如果它有内部元素,似乎您可能正在使用它来分组相关内容,在这种情况下,我会建议将其作为最具语义的方法。否则,<hr>是您的最佳选择。