在HTML/XHTML中<b>和<strong>, <i>和<em>之间的区别是什么?什么时候使用它们?


当前回答

<b>和<i>,没有实际的语义意义(就像@splattne指出的那样)是正确的,在很久以前。在现代HTML5 (<!DOCTYPE html>)它们确实有意义。查看以下链接。

语义(来自MDN)

<b>:引起注意元素 摘要中的关键字 产品名称。

<p>Here at company XYZ, we use <b>HTML</b> and <b>Javascript</b>.</p>

<i>: Idiomatic Text元素 不同的声音或情绪 分类学名称(如“智人”属和种) 来自另一种语言的惯用术语(如“等等”) 技术术语

<p>I <i>did</i> tell him, to arrive on time for the meeting.</p>

<b> vs. <strong>

认识到这两者在HTML5中都是有效的语义元素,并且它们在大多数浏览器中都具有相同的默认样式(粗体)可能会有所帮助(尽管一些较老的浏览器实际上下划线<strong>)。每个元素都是在特定类型的场景中使用的,如果你想要加粗文本作为装饰,你应该实际使用CSS font-weight属性。源

<i> vs. <em>

<em>元素表示其内容的重音强调,而<i>元素表示与普通散文分开的文本。源

我的2美分

我个人更喜欢<b>和< I >而不是<strong>和<em>。

它们更短,从开发人员的角度来看,它们的语义也很有意义。 我不知道今天的屏幕阅读器是否能和它们一起工作。如果没有,我想他们最终会的。A18n是一个很难的主题,我只是遵循文档的引导。MDN说我可以用它们,所以我就用了。

其他回答

<b>和<i>都与风格有关,而<em>和<strong>是语义的。在HTML 4中,前者被归类为字体样式元素,后者被归类为短语元素。

正如您正确指出的,<i>和<em>通常被认为是相似的,因为浏览器通常以斜体显示它们。但根据规范,<em>表示强调,<strong>表示更强调,这很清楚,但经常被误解。另一方面,何时使用<i>或<b>之间的区别实际上是一个风格问题。

对于文本粗体使用<b>标记

对于重要的文本,使用<strong>标记

对于文本斜体样式使用<i>标签

对于强调的文本使用<em>标签

<em>和<strong>消耗的带宽大于<i>和<b>。

它们还需要更多的输入(如果不是自动生成的话)。

它们还会让编辑器屏幕上充斥着更多的文本。我似乎记得程序员喜欢小一点的源文件,如果它们是相同的。(让我们面对现实吧,它们是一样的。是的,确实存在“技术”差异(<i>咳嗽</i>,咳咳,不好意思),但这基本上是假的。)

对于上面的任何标记,如果您需要它们与默认呈现不同,您可以使用样式表自定义它们的显示方式。

以下是定义和建议用法的摘要:

< b >…为了功利目的而被吸引注意力的一段文字,没有传达任何额外的重要性,也没有其他声音或情绪的暗示,如文档摘要中的关键词,评论中的产品名称,交互式文本驱动软件中的可操作的单词,或文章导语。

< >强…Now表示重要性,而不是强调。

<我>…以一种不同的语态或语气出现的一段文本,或以一种表明不同文本质量的方式偏离正常的散文,如分类名称、技术术语、来自另一种语言的惯用短语、思想或西方文本中的船名。

< em >…表示强调。

(这些都是从W3C来源直接引用的,其中还添加了我的重点。原文见:https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements和http://www.w3.org/TR/html401/struct/text.html#h-9.2.1)

它们对普通的web浏览器渲染引擎有相同的效果,但它们之间有根本的区别。

正如作者在一篇讨论列表帖子中写道:

想想三种不同的情况:

web浏览器 盲人 移动电话

“大胆”是一种风格——当你说“大胆一个字”时,人们基本上都知道 这意味着在字母周围添加更多的“墨水”,直到它们突出 其余的信里有更多。

不幸的是,这对盲人来说毫无意义。在手机上 和其他pda,文本已经是粗体,因为屏幕分辨率非常小。你不能在没有搞砸的情况下加粗。

<b>是一种样式——我们知道“粗体”应该是什么样子。

然而,<strong>表示应该如何理解某些内容。“Strong”在浏览器中可能(通常)意味着“粗体”,但对于Jaws(盲人)这样的语音程序来说,它也可能意味着较低的音调,或者在Palm Pilot上用下划线表示(因为你不能用粗体加粗)。

HTML从来就不是关于样式的。搜索“Tim Berners-Lee”和“语义网”。>是语义的——它描述了它包围的文本(例如,“这个文本应该比你所显示的其余文本更强”),而不是描述它包围的文本应该如何显示(例如,“这个文本应该是粗体”)。