網頁健康新主張LSM第四課 : 什麼叫做有語意的標籤? Semantic Markup

on 2009年7月11日

這是系列文章,建議您可以依序閱讀:



HTML是由很多標籤組成的文件,每種標籤代表著不同的意義,文件的內容原本只是一堆文字,因為加上了這些標籤以後而變得有結構性而且有意義,像是各種標題、段落、清單、超連結…等等。那麼有語意(Semantic)的標籤是什麼意思呢?而什麼樣的標籤又是沒有語意的呢?

舉個例子來說:<i>標籤代表斜體字、<em>代表強調,但是被<i>和<em>標註起來的文字在瀏覽器中預設都會顯示出斜體字的效果。當你在網頁中看到斜體字時,請問你知道斜體字代表的是什麼意思嗎?這些斜體的文字是重要或是不重要?這時再來看看斜體字背後所使用的HTML標籤,如果是<em>的話就可以知道這些是”強調”的文字,如果是<i>的話就真的不知道它是否重要了。

再舉一個例子:<h1>和<font size="6"><b>都是顯示出字體加大和粗體字的效果。但使用<h1>標籤一看就知道它代表的是大標題,而<font size="6"><b>只是又粗又大的字,所代表的意義是大標題?中標題?是重要的內容?還是只是為了美觀好看而故意放大文字,這就不得而知了。因此,<em>和<h1>都是有語意的標籤,它們所代表的意思分別是強調和大標題,而<i>、<font size="6">和<b>只是將外觀顯示為和一般文字不同,但卻不知道所代表的意思是什麼,就是沒有語意的。

(點上面這張圖可以放大)

對於像是Yahoo!和Google這樣的搜尋引擎程式來說,它們不管網頁漂不漂亮,只會去看HTML的內容,當搜尋引擎看到<h1>和<em>這樣的標籤時,可以很清楚的知道這是標題和強調、是比較重要的文字。如果搜尋關鍵字時剛好有符合這些重要的文字,這個網頁便有比較大的機會被排列到前面幾頁或前幾名,網友會點選到的機會就會比較高。這就是搜尋引擎最佳化(Search Engine Optimization,簡寫為SEO)很重要的方法之一了!

而對於無障礙網頁(Accessibility)所使用的螢幕閱讀軟體,也會認得<h1>是標題、<p>是一般內容的段落、<em>是要強調的東西,便能夠很正確的將網頁中的資訊傳達給使用者。因此不論是SEO或無障礙網頁,使用有語意的HTML標籤都是非常重要的。

既然如此,有哪些標籤是沒有語意、應該避免使用的呢?底下列出這些純粹屬於外觀樣式的標籤應該避免使用:

b, big, hr, i, small, sub, sup, tt

而下列這將些標籤可能將會從HTML的標準規格中移除,也建議不要使用:

basefont, center, dir, font, isindex, menu, s, strike, u

其他沒有列出的標籤,應該依照其所代表的意義來做適當的使用。不要因為只是想要放大文字就用濫用<h1>, <h2>… 哦!應該使用CSS來做更好的樣式排版效果。

下一課就要開始實作啦!用實際的範例,以LSM的方法來寫網頁!

0 意見:

張貼留言