常常有朋友們在做網站，或是撰寫網頁內容的時候， 會很疑惑的問：一般文字加粗體，是用 <b></b> 這組標籤呢？還是用 <strong></strong> 這組標籤呢？ 因為不管用哪一個，在網頁上看起來都一樣呀？ 如果都長的一樣，幹嘛弄那麼多個同義詞標籤呢(不會又是專門來找麻煩的對吧)？

除了粗體字有這個疑惑，其他像是斜體也是一樣，要用 <i></i> 還是 <em></em>呢？ 喔！別忘了還有一個刪除線(就是這個在文字中間畫一條線的刪除線)。 刪除線是用 <s></s>還是<del></del>？

的確沒錯， 上面這幾個 HTML 標籤，真的看起來都一模一樣，不過，實質的意義卻有些不同喔！ 接下來我們就來跟大家聊一聊，這幾組標籤的正確的用法和語意上的差異。

粗體字：b 或是 strong？

b 這個標籤原文是 bold(粗體)，取其字首 B 作為標籤名稱。 而 strong 這個標籤，連縮寫都沒有，就是原文照用：Strong(強烈)。 那這兩個標籤，在瀏覽器上都一樣顯示為粗體，也沒有誰比較粗一點，或誰比較沒麼粗，完完全全一模一樣。

早期，大家都用 <b></b> 來標示粗體字，這完全沒有問題，甚至都沒有聽過有人用 strong 這個標籤。 粗體就是 b，尤其在 Word 這類的文書軟體中，加粗體字的圖示，也是 b 不是嗎？

其實嚴格說起來用 b 來標示粗體是沒錯的，但在意義上，<b> 這個標籤，就僅僅是代表『加粗』，純粹屬於視覺上的意義，而沒有任何語意上的意義。

什麼叫做語意上的意義呢？就是說，一個字串變成了粗體字，是代表他比較重要呢？ 還是說我只是想要他看起來粗粗的，比較大器、比較酷？

用 <b></b> 這個標籤，就是僅僅代表著讓這個字串看起來粗粗的(視覺上的意義)。 而 <strong></strong> 則有實際上的語意，被 Strong 標示過的字串，表示這是很重要的字串，我得要用一個粗體的樣式來提醒大家(語意上的意義)。

怎麼使用呢？ 如果你加粗一段文字，或是一個名詞，目的是要告訴讀者這很重要的話，那麼就改用 <strong></strong>，而不要再用 <b></b>了。 反過來，如果只是講究視覺上的效果，文字本身並沒有什麼特別重要或是需要提醒什麼的，那麼就用 <b></b>。

斜體字：i 或是 em？

i 這個標籤原本就是取自 italic(斜體)的字首 i，當作標籤的名稱，所以當然就是顯示為斜體。 em 的完整名稱則是 emphasized(強調/注重)，取其字首兩個字母作為 HTML 的標籤名稱。

這兩個標籤在網頁上看起來也是一模一樣，都是斜體，同樣的，也沒有誰比較斜一點，或是誰比較正一點。

所以在使用時機上，斜體字和前面分享的粗體字的用法是完全相同的。 視覺層次的標籤，就是 <i></i>。 而 <em></em> 則是代表這是重要的字串(或名詞)，幫我打成斜體來提醒讀者，因為這是我要強調的內容。

刪除線：s 還是 del？

還有一個是刪除號，之前我們也都是習慣用 s，很少人會用 del 這個標籤。 s 原文是 strikethrough(刪除線)，取其字首 S 作為標籤名稱。 del 這個標籤大家一看就會明白：delete(刪除)。

這個標籤最常使用的地方，就是商品價格，之前多少，現在多少，或是市價多少？特價多少？

在用法的邏輯上， 雖然也大致跟前面的說的是一樣的，但 S 這個標籤，有一個很特別的地方。 就是：以前 S 只是顯示為一條刪除線，沒有實質的意義，單純是視覺層次的標籤。 但是到了 HTML5 的時代，S 這個標籤被重新定義了。 雖然顯示起來一樣是刪除線，但是在新的 HTML5 規範中，重新賦予了這個標籤新的意義： 就是用 S 標記過的文字，就代表著這段文字『不再正確(No longer correct)』的意思。

像上面的瘋狂特價回饋的例句，就可以用 S 這個標籤，因為之前的價格『不再正確了』。 同時，也可以使用del，因為舊的價格刪掉了，改為新的價格。 簡單說，就是 s 跟 del 可以混用，或你愛用哪個就哪個，意義是差不多的。

HTML 標籤為什麼要搞的那麼複雜呢？

對呀？ 好好的一個網頁規範，為什麼要搞的那麼複雜呢？ 感覺好像非得要把門檻越築越高，意圖讓人產生無窮的敬畏一樣 XD

其實是這樣的，以前的 HTML 很單純，多半著重在視覺層面，像是用來排版、搞搞簡單的樣式這樣，網頁上每個不同的元素，並沒有非常明確的意義。 也就是說，只要在瀏覽器上看起來對的，就是對的，完完全全的所見即所得(真是美好的年代)。 到了 HTML5 的時代，網路上的內容就不一樣了。 大家強調的是網頁上不同標籤的語意(Semantic Elements)。 也就是說在網頁上每一個標籤標示的元素，都該有一個明確的意義存在，像是我們上面提到的幾個文字樣式的標籤，就不僅僅是視覺層次的概念，也有語意層次的標記。 又好比 HTML 5 新增的 Article, Header, Footer 等等，都是賦予網頁上不同區塊一個明確的意義。

那要這些意義要幹嘛呢？在瀏覽器上看起來不是都一樣？有差別嗎？ 嗯～對我們人類來說真的沒差別，這些差別都是針對機器來的。 好比 Google 這些搜尋引擎，有了語意標籤，那麼 Google 就會更理解你的內容，這樣搜尋結果也會更正確。 更直接的說，使用正確的語意標籤，直接影響的就是搜尋結果的最佳化喔(SEO)。 所以下次寫網頁的時候，是不是該多留意一下了呢？