[HTML5]b,i,s 跟 strong,em,del 這些看起來一樣,但意義不同的標籤們

b, i, s 或是 strong, em, del,要選哪一個標籤呢?
b, i, s 或是 strong, em, del,要選哪一個標籤呢?

常常有朋友們在做網站,或是撰寫網頁內容的時候,
會很疑惑的問:一般文字加粗體,是用 <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 標示過的字串,表示這是很重要的字串,我得要用一個粗體的樣式來提醒大家(語意上的意義)。

簡單來說,就是一個是視覺上的意義,一個有實際上代表重要的意義:
我是 B,我只是看起來胖,沒有其他的意思。
我是 Strong,我不僅看起來胖,還表示我很強壯喔!


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


斜體字:i 或是 em?


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


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

我是 i,我只是看起來斜斜的,沒有其他的意思。
我是 em,我看起來斜斜的,是因為我很重要喔!


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


刪除線:s 還是 del?


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


這個標籤最常使用的地方,就是商品價格,之前多少,現在多少,或是市價多少?特價多少?
[例句]瘋狂特價回饋:
原價:NTD 1299.-
限時特價:NTD 299.-


在用法的邏輯上,
雖然也大致跟前面的說的是一樣的,但 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)。
 
所以下次寫網頁的時候,是不是該多留意一下了呢?