前言
前幾天洗澡的時候突然想到，到底 <b> 跟 <strong> 差在哪裡？兩個都可以表現粗體樣式，而且瀏覽器看起來也都一模一樣，那為什麼要分兩個同義詞標籤？但其實它們實質的意義還是有些許不同啦，如果你也跟我有一樣疑問的話，那就繼續看下去這幾組標籤的正確的用法和語意上的差異吧！
（ 圖片來源 ）
物理 / 邏輯標記
- 物理標記：告訴瀏覽器我需要用指定的樣式去顯示這段文字，但它本身並沒有其它的作用。
- 邏輯標記：告訴瀏覽器我需要用強調的樣式去顯示這段文字，它是強調文件邏輯的，並非只是通知瀏覽器應該如何顯示。
物理標記是告訴瀏覽器我應該以何種樣式顯示文字，而邏輯標記是告訴瀏覽器這些文字有什麼樣的重要性。
（ 圖片來源 ）
粗體字要用 <b> 還是 <strong> ？
<b>
b 這個標籤原文是 bold （ 粗體 ），取其字首 b 作為標籤名稱。
<strong>
沒有使用縮寫，就是直接原文照用 Strong （ 強烈 ），瀏覽器通常把它顯示為粗體。
<b> 標籤是一個物理標記，它所包圍的文字將被設為 bold ，僅代表著讓這個文字看起來粗粗的（ 視覺上的意義 ），而 <strong> 標籤是一個邏輯標記，作用是加強文字語氣，表示這是很重要的文字，所以我要用一個粗體的樣式來提醒大家（ 語意上的意義 ）。
在 HTML5 興起後，重新界定了 <b> <strong> 這幾個相似標籤的意義，可以看一下 HTML5 規範原文。
- <b> ：「 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 」 —— 無強調或著重意味的粗體，比如文章摘要中的關鍵詞、評測文章中的產品名稱、文章的導言…等等。
- <strong> ：「 strong importance for its contents 」 —— 著重內容。
所以如果你加粗一段文字，或是一個名詞，目的是要告訴讀者這很重要的話，就使用 <strong> ，反過來，如果只是想講究視覺上的效果，文字本身並沒有什麼特別重要或需要提醒什麼的，那麼用 <b> 即可。
螢幕閱讀器使用上的差別
當視障者在使用螢幕閱讀器時，能夠明顯感受到 <b> 與 <strong> 的不同，遇到 <b> 時與處理一般詞語一樣進行閱讀，但遇到 <strong> 時會加重與停頓。
粗體字要用 <i> 還是 <em> ？
<i>
i 這個標籤原文是 italic （ 斜體 ），取其字首 i 作為標籤名稱。
<em>
em 這個標籤原文是 emphasized （ 強調 / 注重 ），取其字首兩個字母 em 作為標籤名稱，瀏覽器通常把它顯示為斜體。
在 HTML5 興起後，重新界定了 <i> <em> 這幾個相似標籤的意義，可以看一下 HTML5 規範原文。
- <i> ：「 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 」 —— 無強調或著重意味的斜體，比如生物學名、術語、外來語…等等。
- <em> ：「 stress emphasis of its contents 」 —— 強調內容。
<i> 標籤是一個物理標記，它所包圍的文字將被設為 italic ，僅代表著讓這個文字看起來斜斜的（ 視覺上的意義 ），而 <em> 標籤是一個邏輯標記，代表這是重要的文字，我要強調此內容，所以我要用一個斜體的樣式來提醒大家（ 語意上的意義 ）。
