HTML5 中的 <b> 与 <span>

Question

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

b 元素表示正在关注的文本范围 出于实用目的而绘制，没有传达任何额外的重要性 并且没有暗示其他声音或情绪

听起来像是你不能使用strong、em或i时使用的那个标签。

当没有其他元素时，应将 b 元素用作最后的手段 更合适。

但是我们已经得到了span，用于当措辞内容还没有适用的标签时。

span 元素本身没有任何意义......它代表了它的 孩子们。

有一个示例使用列表

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

但是除了将它们设置为粗体之外，我找不到将它们联系在一起的基本原则。 old spec 甚至提到了风格：

b 元素表示要风格偏移的一段文本 来自普通散文[强调]

样式用于 CSS。我们还建议使用类来显示实际含义是什么

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

这听起来像是用途过于分散，无法单独按标签进行分组。我还可以使用类来解释 span 的语义。

span 元素...与全局元素一起使用时很有用 属性，例如类、语言或目录。

示例

如果我想要这个：

CS 101 Final 的分数是 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 标签？

Answer 1

第一个例子相当简单。您正试图让“CS 101 Final”吸引眼球，因为它比“您的分数”文本更重要。那就是

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

使用<b>，您不会试图吸引眼球。您希望整个文本被均匀地阅读，但您将某些单词和短语标记为对读者有用（实用目的）。坦率地说，这并没有太多用途。规范给出了冒险游戏和报告中的关键字示例，但要找到很多用途并不容易。

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

我使用什么标准来决定是 b 还是 span 标签？

从上面可以看出，这是一个淘汰的过程。 <strong> 或 <em> 或 <cite> 合适吗？是的 - 使用它们。否 - <b> 或 <i> 合适吗？是的 - 使用它们。不，然后使用<span>

Answer 2

span 没有任何意义。从语义上讲，是否存在 span 元素并不重要。所以问题不应该是何时使用b 与span，而应该是：我应该使用b 吗？ （在很多情况下，您可能希望使用 b 而不需要样式挂钩，因此如果 b 不合适，则绝对不需要 span。）

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

我认为definition 中提到的示例用例给出了一个很好的主意：

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

→Summarized：关键字。

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

在食谱中，它可能是所有成分。在您的问题中，它可能是“b”、“span”和“HTML5”。在产品页面上，它可以是产品名称、主要功能和制造商。想想meta-keywords，但不是整个文档（与link 与a 相同）。

不要让您被造型需求误导。虽然在许多情况下，粗体字可能是一种合适的样式，但大多数时候我从不对b 使用任何特殊样式。

Answer 3

我的个人设计准则是：

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

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