# 標籤 `<strong> <b>`、 `<i> <em>` 、`<s> <del>`差異

**本文作者學習筆記網站：https://dev.rraiy.cc/**

##### 簡言之版本：
`<strong>` 標籤 (tag) 其語意 (semantic) 是用來強調一段內容特別重要 (strong importance for its contents)！瀏覽器預設的 strong 樣式也是會用粗體字顯示。

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

`<strong> `和 `<b> `標籤的差異？

`<b> `標籤雖然也會將包裹的內容文字變成是粗體字的效果，但 `<b>` 僅止於樣式的用途，標籤本身沒有任何語意，不像是 `<strong>` 有特殊語意表示內容的重要性，所以 `<strong>` 和 `<b>` 標籤對於 SEO 搜尋引擎理解網頁內容是有極大的根本性差異的。通常也會建議少用 `<b>`，如果真的想用粗體字效果的話，其實你應該使用 CSS。

---

##### 詳細以及延伸
兩者差異主要是在這三點
:::success
- web browsers -> SEO
- 無障礙友善
- 移動裝置
:::
`<b> `：bold，單純把樣式加粗，講究視覺的效果
`<strong>`：擁有語意上的作用，表示這段文字相當重要，因此瀏覽器才要加粗來提醒使用者。

有網友的譬喻：
**我是 B，我就是真的胖。**
**我是 Strong，我不僅看起來胖，我還很強壯！**

「強調」在樣式上的確是經常用加粗來呈現，但這對盲人沒有任何效果，盲人的世界中，強調的語氣常用低沈的嗓音，或者在點字上使用下劃線的效果。

此外，移動類型的裝置因為本身分辨率就比較小，很多都會直接使用粗體來處理文字，這時 `<b>` 就顯得作用小。

我們必須了解到 HTML 從來就不是要用來處理樣式！因此對於 strong ，我們應該理解成在這個範圍文本內，被 strong 包住的內容比其他來得更重要，而並非僅是如何顯示、呈現樣式這麼單純。

---

以上面的例子看 `<i> <em>` 以及`<s> <del>`

### 斜體字 - `<i> <em>`
`<i>` ： 單純斜體效果

`<em>` ： 不僅斜體，同時也想提醒是重要的內容

:::info
而 b 與 i 之間也是有差異的， HTML 是這麼定義

b → 關鍵詞、產品名稱、可交互的詞句
i → 分類名稱、技術術語、思想、其他語言、音譯 （以另一種聲音、情緒，偏離原本的內容）
:::

### 刪除線 - `<s> <del>`
`<s>` ： 以前的 s 單純作為刪除線的功用，沒其他意思，但在 HTML5 被重新定義成「不再正確(No longer correct)」

`<del>`：使用在文本編輯時，被刪掉的內容，例如待辦清單的完成

詳細解釋參考：
[https://html.spec.whatwg.org/#the-i-element](https://html.spec.whatwg.org/#the-i-element)

---

**本文作者學習筆記網站：https://dev.rraiy.cc/**