使用<b>和<i>元素

它们用于什么

HTML5规范对这些元素的预期用法进行了重新定义：

i 元素表示一段与常规叙述相比在语气或文体上有所不同的文本，或以其他方式将其从正文中区分出来以表明其不同的文本性质，例如分类学名称、技术术语、外语的短语、音译、心理活动，或西文中的船名。

b 元素表示一段为了实用目的而需要引起注意的文本，但不传达额外的重要性，也不暗含不同的语气或文体，例如文档摘要中的关键词、评论中的产品名称、以文本驱动的交互式软件中的可执行词语，或文章导语。

存在什么问题？

误用这些标签会使内容的本地化变得困难。

通用的问题。 使用b和i标签会有问题，因为它会让作者停留在表现层的思维上，而不是帮助他们转向真正的语义化标记。至少，它会模糊观念。对于赶时间的开发者来说，与其停下来考虑可移植性和面向未来之类的问题，不如直接在文本里用其中一个标签让它看起来与众不同，这种做法往往更具诱惑力。

由于不同文化在呈现方式上可能需要差异化处理，尤其是在粗体和斜体等样式方面，因此会产生国际化问题。

日语的例子。 英文文档可能用斜体来表示强调、文献名以及外文短语，但该文档的日文译文未必会对这三类内容使用同一种表现方式。日本的作者可能会避免使用斜体和粗体，因为这些效果在小号字上很难让复杂的字符看起来美观。

当然，日本的本地化人员可以通过CSS来为b和i元素应用不同的样式。不过，他们可能会觉得改用日文排版中更常见的做法，内容会更易于理解，例如使用着重号表示强调，使用双直角引号标出书名，以及用双尖引号标出外语的短语。这些是英语中不使用的日文排版方式。

问题在于，如果英文作者到处都使用了 i 标签（只考虑了他/她想要的英文呈现），日本的本地化人员将无法轻松地对不同类型的文本分别应用不同的样式。

如果使用语义化标记，这个问题就可以避免。若英文作者分别使用<em>..</em>、<cite>...</cite>和<i class="foreignphrase">..</i>来区分这三种情况，本地化人员就可以很容易地通过修改CSS分别为这些项目实现不同的效果。

当然，开发者也可以用span元素来代替i或b。不同之处在于，如果没有样式规则，就不会回退到斜体或粗体。

单语种视角。 随着时间推移，这也同样适用于单一语言的页面。假设你想更改新的公司出版指南，因为你觉得文档名用粗体比斜体更好看。若使用了语义化的HTML，你可以仅对CSS做一点小改动，就在整个网站中只改变文档名的样式。而如果你只用了i且未区分不同语义，你就必须在每个页面中查找相关的i标签逐个修改，避免对强调或外来词也施加同样的样式更改。

使用语言属性。 如果你约定对内容中的外来词或短语使用斜体，那么你可能会认为仅依靠语言属性就可以标识出需要设置样式的部分，例如<i lang="fr">..</i>。

事实上，在采用这种做法之前应当仔细考虑，因为语言属性只描述文本的语言，而不是其语义。将来你可能希望根据使用语境来对另一种语言的文本采用不同的样式。

因此，通常更稳妥的做法是同时使用class属性来描述语义，而不要让语言属性承担过多含义，例如：

<p>There is a certain <i class="foreignphrase" lang="fr">je ne sais quoi</i> in the air.</p>。

推荐用法

HTML5规范对i元素的使用给出了如下建议（着重标记为后加）：

作者可以 使用class属性 于i元素，以标识为何使用该元素，这样如果将来需要更改某种特定用法的样式（例如梦境片段而不是分类学术语），作者就无需遍历整个文档（或一系列相关文档）逐一标注每次的使用。

也鼓励作者 考虑是否有其他元素更为合适 而不是使用i元素，例如使用em元素标注重读强调，或使用dfn元素标注术语的定义性出现。

对b元素的描述中也有类似表述，其中包括这样一句：当没有其他更合适的元素时，b元素应作为最后的选择。

在HTML5规范中，4.5 文本级语义一节列出了其他可用于对行内文本进行语义化标注的元素，例如dfn、cite、var、samp、kbd等。

把b或i元素理解为一种带有自动回退样式的span元素可能会有所帮助。与span元素类似，这些元素通常也需要类名才能更有用。