語義化你的HTML 標籤

 

作為一個前端開發人員，你要是沒有聽說過css，那你肯定是一個“out-man”。隨著css的深入人心，結構與表現與行為的逐漸分離，HTML語義化成了炙手可熱的賣點。

 

語義化的HTML首先要強調HTML結構

 

         一個網頁就好像一幢房子，HTML結構就是鋼筋混泥土的牆，一幢房子如果沒有鋼筋混泥土的牆那就是一堆廢磚頭，也就稱不上是房子了。CSS是裝飾材 料，是油漆，是用來裝飾房子的。CSS如果沒有html結構那就什麼也不是了，沒有了實際使用價值。CSS完全依靠引用它的(X)HTML文檔。如果你想 使CSS的能力發揮到極致，提供一個用既乾淨又有結構的HTML是非常必要的。

        其實HTML中的標籤都有他自身的含義，只是常常被忽視——就像表格一直充當著網頁布局的角色。還好隨著CSS 的重現江湖，表格也終於回到他的本質工作——列表資料。它會告訴我們說：“這行是一個標題；這幾行組成了一個段落；這些文字是項目列表……”在做前端開發 的時候要記住：HTML告訴我們一塊內容是什麼（或其意義），而不是它長的什麼樣子。

        寫語義化的HTML結構其實很簡單，首先掌握HTML中各個標籤的語義，在看到內容的時候想想用什麼標籤能更好的描述它，是什麼就用什麼標籤。

 

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為標題使用，並且依據重要性遞減。<h1>是最高的等級。

 

P

段落標記，知道了 p 作為段落，你就不會再使用<br />來換行了，而且不需要<br /> 來區分段落與段落。p中的文字會自動換行，而且換行的效果優於<br />。段落與段落之間的空隙也可以利用CSS來控制，很容易而且清晰的區分出段落與段落。

 

<ul>、<ol>、<li>

<ul>無序列表，這個被大家廣泛的使用，<ol>有序列表也挺常用。在web標準化過程中，<ul> 還被 更多的用於導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支援CSS的時候，導航連結仍然很好使，只是美觀方面差了一點而已。

 

<dl>、<dt>、<dd>

dl就是“定義列表”。比如說詞典裡面的詞的解釋、定義就可以用這種列表。

 

<em>、< strong >

<em> 是用作強調的，<strong> 是用作重點強調的。

 

<table>、<td>、<th>、< caption >、 summary

XHTML中的表格不再是用來布局。如果是為了標記列表的資料，就應該使用表格了。<th>為表格標題，屬性summar為摘要（要想 提高搜尋的排名這個絕對不應該少），<caption>標籤為首部說明，<thead>標籤為表格頭 部，<tbody>標籤為表格主體內容，<tfoot>標籤為表格尾部。

 

<ins>, <del>

知道del，就不要再用<s>做刪除線了，用del顯然更具有語義化。而且del還帶有cite和datetime來表明刪除的原因以及刪除的時間。ins是表示插入，也有這樣的屬性。

 

<abbr>、<acronym>

<abbr>標籤是表示web頁面上的簡稱，<acronym>標籤為取首字母縮寫。

 

alt 屬性和 title 屬性

title屬性用來為元素提供額外說明資訊，但是並不是必須的。

alt屬性為不能顯示映像、表單或applets的使用者代理程式（UA），指定替換文字。替換文字的語言由lang屬性指定。

 

讓你語義化HTML結構的無數條理由：

 

1.去掉或樣式丟失的時候能讓頁面呈現清晰的結構：
HTML本身是沒有表現的，我們看到例如<h1>是粗體，字型大小2em，加粗；<strong>是加粗的， 不要誤會這是HTML的表現，這些其實是HTML預設的CSS樣式在起作用。所以去掉或樣式丟失的時候,也能讓頁面呈現清晰的結構，增強頁面的可讀性。

 

2.螢幕助讀程式（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。

如果你使用的含語義的標記,螢幕助讀程式會根據你的標籤來判斷網頁的內容，而不是一個字母一個字母的拼字出來。

 

3.PDA、手機等裝置可能無法像普通電腦的瀏覽器一樣來渲染網頁（因為這些裝置對CSS的支援較弱）。

使用語義標記可以確保這些裝置以一種有意義的方式來渲染網頁。理想情況下,觀看裝置的任務是符合裝置本身的條件來渲染網頁。

 

4.搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重。

搜尋引擎的爬蟲也是網站的“訪客”,現在它們是極其寶貴的使用者。沒有他們的話,搜尋引擎將無法索引你的網站,然後一般使用者將很難過來訪問。

 

5.便於團隊開發和維護

在團隊中大家都遵循同一個標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模組化開發。

來源：人人網 FED Team