by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2061

一、普通的开头

HTML5中的语义那是相当劳力伤神的一件事啊。顾名思意，一知半解情况下使用HTML5的语义化标签，多半会进入“不合理使用标签”的深色名单。我们都是对自己有要求的人，虽然很烦，很折腾，我们还是有必要花大量的功夫去理解每个HTML5标签的真正语义。

不过嘛，这HTML5虽然势如破竹，但是，要真正一统天下还需时日。所以，HTML4还不是很了解的青年们，不必急于追随潮流，什么HTML5啊之类的，就当是浮云，知道有几只眼睛几条腿就行了。因此，对于这类青年，那些专门讲HTML5的文章，基本上可以当作流风之回雪。本文有些特殊，是对比HTML4，HTML5几个标签元素的。因此，不管你是哪个级别的青年，本文内容都算是有看头的。

很多HTML4中的标签元素在HTML5中被赋予了很多新的语义，这就像是给前朝遗孤赐予个什么官爵之类。本文就将讲述i, b, em, strong元素被HTML5包装成什么样子。

二、概要

• <i> – 原本只是倾斜，现在用来体现一种“交替的声音”，通俗将就是普通段落文字中文艺的或2B的文字。像是外语（例如我经常写文章时混搭一些英文或日语）、科技术语（如超氧化物歧化酶SOD）或是用做排版的斜体文字。
  (W3C:Markup, WHATWG)
• <b> – 原本就是加粗，现在表示“文体突出”文字，通俗将就是普通段落文字中突出不安分的文字。像是文档概要中的关键字，评论中的产品名。或者代表强调的排版方式。(W3C:Markup, WHATWG)
• <em> – 原本表示强调，现在指有压力的强调。(W3C:Markup, WHATWG)
• <strong> – 原本表示更强强调，现指相当重要，基本上都是一样的。(W3C:Markup, WHATWG)

三、详细

<i>和<b>都是文字样式元素，没有任何语义，就是用来控制文字的长相的，因此又称为表象元素，是一度不推荐使用的标签。如今，这两个元素有了语义，但是，它们的样式又能被CSS改变。像是<b>元素，并不是非得是加粗。正因如此，推荐使用类名来表示其含义以便日后可以轻松改变其样式。

i元素
下面是W3C草案引用：

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized).

我们不用管上面abc说的是什么，直接看下面的例子。
正如概要提到的，语义化的<i>元素可以用来表示：外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。

下面开始示例。

一段剧本，引用如下：

尔康：紫薇，快走，快离开，容嬷嬷要来了！！

紫薇依依不舍离开尔康的房间……

尔康：好了，终于把粘人的紫薇给弄走了，接下来就是二人独处的大好时光了！

尔康：琪琪，你可以从衣柜里出来了。

上面就使用了<i class="voiceover">来表示话外音，以反映尔康内心少女般的情怀。

还是剧本节选，引用如下：

永琪：尔康，不要，不要啊，やめて(雅蠛蝶)！

使用<i lang="ja-latn">やめて</i>来表明“不同语言”。

皇阿玛：紫薇，这是使用天山雪域红景天熬的粥，你有没有听过“相宜本草，红景天幼白系列，以红，养白”。来，多吃点！

使用<i class="taxonomy">红景天</i>表示分类名。

<i>的使用是最为淡定的——像<em>为压力强调文字，<strong>为重要文字，<cite>为引用或文献目录，<dfn>为定义单词，<var>为数学变量。记住，在使用<i>的使用，最好使用class属性让人知道为什么这个元素要被使用。对了，上面语言lang属性元素可以使用[lang="ja-latn"]选择器进行样式定义。

b元素
W3C草案引用如下：

The <b> element represents a span of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.

<b>和<i>一直都是一路货色。在我看来，虽然在HTML5中这两个元素被赋予的语义，但是却是下等人的感觉，专干一般人不干的杂活。

上面第一个例子中的人名（尔康），就是使用的<b>标签，<b class="character">尔康</i>用来表示人物。

<b>元素该在什么地方使用呢？就是下面这些元素都不适合的时候：表重要的<strong>，表强调的<em>，表标题的<h1>–<h6>，表高亮或标记文本的<mark>等。

<b>元素就像是三国杀五谷丰登中最后一位拿牌的人, sign~~

em元素
W3C草案引用如下：

The em element represents a span of text with emphatic stress.

em元素过去就是强调的意思。在HTML5中的释义总有一个名为”stress”的单词伴随左右。”stress”其实也是强调的意思，我为了有所区分，就翻译成本意“压力”的意思。用在语句某个单词上来改变句子的侧重。举例说明：

紫薇晕倒……

皇阿玛：立即给我传太医。

上面皇阿玛台词中，强调的是“太医”(太医被em标签包裹)，要传的是太医，不是紫薇的心上人尔康。

紫薇晕倒……

皇阿玛：立即给我传太医。

而这里，“立即”被em包裹，说明强调的是时间的及时性，耽误1分钟我都要你们的脑袋。

strong元素
W3C草案引用如下：

The strong element represents a span of text with strong importance.

这个元素真没什么好说的，HTML4跟HTML5有什么差异吗？我是没看出来。我们可以嵌套使用<strong>和<em>元素来表示相对重要性。

四、爱奇艺的结尾

虽然HTML5中以前的一些表象元素i, b都语义化了，但是，有人觉得这是个糟糕的想法，无论是提供者还是开发者都没有这么多蛋疼的闲功夫去确认i或是b标签的语义，HTML4中em, strong表意，i, b表形并没有什么让人不可接受的。

等，老外对此可谓观点多多。时间关系，我就不一一叙述了。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2061

（本篇完）