<b> vs HTML5中的<span> </span> </b>

时间:2013-09-11 18:47:24

标签: html5 semantic-markup

我一直难以决定何时使用b以及何时使用span。 b元素的新语义似乎含糊不清。

  

b元素表示注意力的文本范围   为实用目的而绘制而没有任何额外的重要性   而且没有其他声音或情绪的暗示

听起来就像你不能使用strong,em或i时使用的标签。

  

当没有其他元素时,b元素应该作为最后的手段   更合适。

但是,当短语内容还没有适用的标签时,我们已经有了span

  

span元素本身并不代表任何东西......它代表了它   孩子。

有一个示例用途列表

  

文档摘要中的关键词,评论中的产品名称,   交互式文本驱动软件或文章中可操作的单词   莱德

但是我找不到将它们联系在一起的基本原则,而不是将它们塑造成大胆的。 old spec甚至提到了样式:

  

b元素表示文本范围风格偏移   来自正常的散文[强调补充]

样式是针对CSS的。我们还建议使用类来显示实际含义

  

作者可以使用b元素上的class属性来识别原因   正在使用该元素

这听起来好像使用太多,不能单独按标签分组。我也可以使用类来解释span的语义。

  

span元素...与全局一起使用时非常有用   属性,例如class,lang或dir。

实施例

如果我想要这个:

  

CS 101决赛 的得分为42%。

我写

Your score for <b>CS 101 Final</b> is 42%.

Your score for <span>CS 101 Final</span> is 42%.

或者这个:

  

答案: 42

会不会是

<b>Answer</b> 42

<span>Answer</span> 42

(它只是一个键值对,因此定义列表不适用。)

我不仅仅想知道各个示例的正确标签。我想知道为什么他们是对的。我用什么标准来决定b或span标签?

3 个答案:

答案 0 :(得分:3)

第一个例子非常简单。你试图使“CS 101 Final”引起注意,因为它比“你的得分”文本更重要重要。那就是

Your score for <strong>CS 101 Final</strong> is 42%.

<b>,你不是想要引起注意。您希望均匀地读取整个文本,但是您将某些单词和短语标记为对读者有用(实用目的)。坦率地说,这个用途并不多。该规范给出了冒险游戏和报告中关键字的示例,但要找到很多用途并不容易。

第二个例子比较棘手。在这里,“答案”在风格上被抵消了。 “答案”这个词绝对不比实际的答案文本重要,也不需要因任何其他原因而引起读者的特别注意。它只是被标记为与实际答案文本不同。然而,在“没有专用元素的常用习语”部分中的规范建议使用<b>在对话中标记说话者,并且使用它可以被视为类似于此。但基本上它只是造型,所以<span>有一个类可能是最好的选择。

  

我使用什么标准来决定b或span标记?

从上面可以看出,这是一个消除过程。 <strong><em><cite>是否合适?是的 - 使用它们。否 - <b><i>是否合适?是的 - 使用它们。不,然后使用<span>

答案 1 :(得分:3)

span没有任何意义。从语义上讲,如果有span元素则无关紧要。所以问题不应该是何时使用bspan ,但它应该是:我应该使用b吗? (在许多情况下,您可能希望在不需要样式挂钩的情况下使用b,因此如果span不合适,绝对不需要b。)

为了确定b是否合适,我认为想象一个利用语义标记的智能用户代理可能会有所帮助。如果每个人都能正确使用HTML5,那么这样的用户代理可以从标有b的内容中推断出什么?

我认为definition中提到的示例用例提供了一个非常好的主意:

  • 文档摘要中的关键词
  • 评论中的产品名称
  • 交互式文本驱动软件中的可操作词语
  • 文章lede

Summarized关键字

因此,例如,这样的用户代理可以提取段落/部分中的所有关键字并以某种方式呈现它们,因此您可以决定是否要阅读它。

在食谱中,它可能是所有成分。在你的问题中,它可能是“b”,“span”和“HTML5”。在产品页面上,它可以是产品名称,主要功能和制造商。考虑meta-keywords,但不是文档范围(与linka相同)。

不要因为造型需要而误导你。虽然在许多情况下,粗体可能是一种合适的样式,但大多数时候我从未对b使用任何特殊样式。

答案 2 :(得分:0)

我的个人设计指南是:

  

<B>示例)   应仅用于装饰目的。

也就是说,内容不会从较重的字体中获得更多或更少的东西,但如果有的话可能会在那个地方看起来更好。