html - <b> 与 HTML5 中的 <span>

标签 html semantic-markup

我一直难以决定何时使用 b 以及何时使用 span。 b 的新语义元素看起来很模糊。

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood

这听起来像是您不能使用 strong、em 或 i 时使用的标签。

The b element should be used as a last resort when no other element is more appropriate.

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

The span element doesn't mean anything on its own... It represents its children.

有一个示例使用列表

key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede

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

The b element represents a span of text to be stylistically offset from the normal prose [emphasis added]

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

authors can use the class attribute on the b element to identify why the element is being used

这听起来好像用途差异太大,无法单独按标签进行分组。我还可以使用类来解释 span 的语义。

The span element... can be useful when used together with the global attributes, e.g. class, lang, or dir.

例子

如果我想要这个:

Your score for CS 101 Final is 42%.

我写吗

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

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

或者对于这个:

Answer: 42

会不会

<b>Answer</b> 42

<span>Answer</span> 42

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

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

最佳答案

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

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

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

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

What criteria do I use to decide on a b or a span tag?

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

关于html - <b> 与 HTML5 中的 <span>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18748976/

相关文章:

javascript - 无法让 JavaScript 代码在 Firefox 上运行

html - 来自 React 的 DIVitis

html - 当值为 URL 时,在语义标记中使用链接标记而不是元标记

xhtml - 为 html 表放置脚注的首选方法是什么?

javascript - 淡化动态更改的 (jQuery) 背景图像?

javascript - 在 JavaScript 中定期更改图像

html - 是否有 th for ul 的语义等价物?

html - CSS/HTML : What is the correct way to make text italic?

javascript - 更改按钮 onclick

javascript - 为什么使用不同电脑时 "WebRTC Screen sharing"不流?