從HTML5規範弄清i、em、b、strong元素的區別

為了語義化，HTML5增加了不少新標籤。其中i、em和b、strong這兩組標籤是最容易弄混的，不好好去探究一下，還真說不清。這個也是前端面試中經常會問的問題。今天從源頭上，也就是從HTML5的文檔（https://w3c.github.io/html/textlevel-semantics.html#the-em-element）中來一探究竟！

首先，單從顯示效果來看，在不額外添加css的情況下，i和em標籤包圍的文字將會以斜體呈現，b和strong標籤包圍的文字則會加粗顯示。如圖

效果如下：

和在創建之初就是簡單地表示粗體和斜體樣式，但是到了HTML5，為了語義化特性，這兩個標籤也被賦予了語義，樣式倒不那麼重要，因為那是css的事情。但上面兩組標籤語義還是各有側重，下面依照規範逐一介紹：

i

規範描述：

Theelement

a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

譯文：

i 元素代表在普通文本中具有不同語態或語氣的一段文本，某種程度上表明一段不同特性的文本，比如一個分類學名稱，一個技術術語，一個外語習語，一個音譯，一個想法，或者西方文本中的一艘船名。

舉例：

大家可以在i標籤上應用class來表明用這個元素的意圖，這樣該特殊樣式在以後如需修改時，不需要仔細檢查全部文檔來更改。在使用i標籤時候時，推薦考慮是否應用其他標籤更為合適，如用em來突出強調，dfn標籤來定義項目實例。

em

規範描述：

The em element represents stress emphasis of its contents.

The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.

譯文：

em 元素代表對其內容的強調。突出強調的位置會改變語句本身的意義。因此，元素構成內容的一個部分。用這種方式表示強調的程度依賴於是何種語言。

舉例（類似漢語裡面重讀某個詞表示不同含義）：

規範末尾note：

The em element isn』t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

The em element also isn』t intended to convey importance; for that purpose, the strong element is more appropriate.

譯文：

em不是一個普通的斜體標籤。有時為了部分文本由於不同的語態或語氣需有別於段落的其他部分，這是i標籤更為合適。em標籤不是為了表明重要性，如果是出於這個目的，strong標籤更為合適。

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, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

譯文：

b 元素代表側重實用目的而不帶有任何額外重要性也不暗示不同語態或語氣的一段文本，比如一段文本摘要中的關鍵詞、一段審查中的產品名稱、文本驅動軟體中的可執行語句或者一篇文章的導語。

舉例：

規範建議：

The

element should be used as a last resort when no other element is more appropriate. In particular, headings should use the

to

elements, stress emphasis should use the em element, importance should be denoted with the

element, and text marked or highlighted should use the

element.

就是說當沒有其他元素合適時，最後才考慮用b標籤。特別是，標題應該使用h1到h6標籤，突出對內容的強調用em標籤，突出重要緊急用strong標籤，文本標記使用mark標籤。

strong

規範描述：

The strong element represents strong importance, seriousness, or urgency for its contents.

譯文：

strong 元素代表內容的強烈的重要性、嚴重性或者緊急性。

• 重要性

元素可以被用在標題（heading）、說明（caption）或者段落（paragraph）上，來顯示這部分被包圍的文字的重要性。

• 嚴重性

元素可以被用來標記警告或者警示標誌。

• 緊急性

元素可以被用來表示需要被儘快看見的部分。

小結：

根據規範來看，em和strong的語義情景很明顯，b和i的理解還是有些晦澀，個人的理解是：

1、em會對文本含義有改變作用，類似讀一句話時重讀某一個字或詞會表達不一樣的意思一樣。

2、strong會突出包含文本的重要性、嚴重性和緊急性等。

3、i標籤為了表示不同語態或特性的文本，有點像文字排版裡面的那些用斜體表示的內容（技術術語、外語習語這些排版會有不同的內容）。

4、b標籤主要是為了突出顯示關鍵詞、產品名稱等；

b標籤的語義規範也是很模糊，所以也是不太建議用。