故事的開頭

HTML5中的語義那是相當勞力傷神的一件事。顧名思意，一知半解情況下使用HTML5的語義化標籤，多半會進入“不合理使用標籤”的深色名單。我們都是對自己有要求的人，雖然很煩，很折騰，我們還是有必要花大量的功夫去理解每個HTML5標籤的真正語義。

不過嘛，這HTML5雖然勢如破竹，但是，要真正一統天下還需時日。所以，HTML4還不是很瞭解的青年們，不必急於追隨潮流，什麼HTML5啊之類的，就當是浮雲，知道有幾隻眼睛幾條腿就行了。因此，對於這類青年，那些專門講HTML5的文章，基本上可以當作流風之迴雪。本文有些特殊，是對比HTML4，HTML5幾個標籤元素的。因此，不管你是哪個級別的青年，本文內容都算是有看頭的。

很多HTML4中的標籤元素在HTML5中被賦予了很多新的語義，這就像是給前朝遺孤賜予個什麼官爵之類。本文就將講述i, b, em, strong元素被HTML5包裝成什麼樣子。

概要

<i> – 原本只是傾斜，現在用來體現一種“交替的聲音”，通俗講就是普通段落文字中文藝的或2B的文字。像是外語（例如我經常寫文章時混搭一些英文或日語）、科技術語（如超氧化物歧化酶SOD）或是用做排版的斜體文字。

<b> – 原本就是加粗，現在表示“文體突出”文字，通俗講就是普通段落文字中突出不安分的文字。像是文件概要中的關鍵字，評論中的產品名。或者代表強調的排版方式。

<em>

<strong> – 原本表示更強強調，現指相當重要，基本上都是一樣的。

詳細

<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).

W3C specification

我們不用管上面abc說的是什麼，直接看下面的例子。

正如概要提到的，語義化的<i>元素可以用來表示：外文單詞、生物分類、科技術語、船名、劇本舞臺方位、樂譜、三個代表思想或手寫文字。

下面開始示例。

一段劇本，引用如下：

<i>爾康：紫薇，快走，快離開，容嬤嬤要來了！！</i>

紫薇依依不捨離開爾康的房間……

<i>爾康：好了，終於把粘人的紫薇給弄走了，接下來就是二人獨處的大好時光了！</i>

爾康：琪琪，你可以從衣櫃裡出來了。

上面就使用了<i class="voiceover">來表示話外音，以反映爾康內心少女般的情懷。

還是劇本節選，引用如下：

永琪：爾康，<i>やめて</i>(雅蠛蝶)！

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

皇阿瑪：紫薇，這是使用天山雪域<i>紅景天</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.
W3C specification

<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.

W3C specification

em元素過去就是強調的意思。在HTML5中的釋義總有一個名為”stress”的單詞伴隨左右。”stress”其實也是強調的意思，我為了有所區分，就翻譯成本意“壓力”的意思。用在語句某個單詞上來改變句子的側重。舉例說明：

紫薇暈倒……

皇阿瑪：立即給我傳<em>太醫</em>。

上面皇阿瑪臺詞中，強調的是“太醫”(太醫被em標籤包裹)，要傳的是太醫，不是紫薇的心上人爾康。

紫薇暈倒……

皇阿瑪：<em>立即</em>給我傳太醫。

而這裡，“立即”被em包裹，說明強調的是時間的及時性，耽誤1分鐘我都要你們的腦袋。

strong元素
W3C草案引用如下：

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

W3C specification
這個元素真沒什麼好說的，HTML4跟HTML5有什麼差異嗎？我是沒看出來。我們可以巢狀使用<strong>和<em>元素來表示相對重要性。

總結：

雖然HTML5中以前的一些表象元素i, b都語義化了，但是，有人覺得這是個糟糕的想法，無論是提供者還是開發者都沒有這麼多蛋疼的閒功夫去確認i或是b標籤的語義，HTML4中em, strong表意，i, b表形並沒有什麼讓人不可接受的。