武林網(www.vevb.com)文章簡介：記得有一次恐怖的經歷,那個頁面嵌套了不知是十幾層還是幾十層div.讓我看的時候立馬頭暈...其中有些能用span標籤,能用p標籤的,也用div.能用h1,hx的也用div標籤.真是讓人很無語啊..這個時候我多麼希望該開發者有點"語義化標籤"的概念和行動啊.
我看一些招聘要求上都有熟悉Web語義化這一詞和理解/熟悉/精通web標準.而標籤語義化就是web標準的一部分,所以我就把自己以前發在博客園的一篇貼子小修改一下,再貼過來...希望前端入門的er們能知道有這麼個東西.
記得有一次恐怖的經歷,那個頁面嵌套了不知是十幾層還是幾十層div.讓我看的時候立馬頭暈...其中有些能用span標籤,能用p標籤的,也用div.能用h1,hx的也用div標籤.真是讓人很無語啊..這個時候我多麼希望該開發者有點語義化標籤的概念和行動啊..那麼
一：(理論)語義化標籤是什麼？
語義化標籤就是盡量使用有相對應的結構的含義的Html的標籤，以Table為例：
<table>
<tr>
<td>消費項目</td>
<td>消費金額</td>
</tr>
<tr>
<td>吃飯</td>
<td>20元</td>
</tr>
</table>
你看出了上面的Table有什麼毛病嗎？嘿嘿，那你看這個語義化的標籤
<table>
<caption>花費記賬</caption>
<thead>
<tr>
<th>消費項目</th>
<th>消費金額</th>
</tr>
</thead>
<tbody>
<td>吃飯</td>
<td>20元</td>
</tbody>
</table>
這兩塊代碼的標籤不一樣，第二個表格的這些標籤代碼，無疑更符合Web標準.
<caption>:表格的標題;
<thead>:一表格的表頭;
<th>:表的某一列的列頭。
再說我們習以為常的
<title>博客園簡介</title><body>博客園是一個軟件開發的技術樂園，它於2004年創辦，這裡...</body>
你看，為什麼我們看一篇文章，一下就知道標題在哪呢？在瀏覽器的頂端。那為什麼搜索引擎能抓取呢？就是它知道這個語義化標籤<title>裡的就是文章標題，要是我們不遵守這個，而是：
<span>博客園簡介</span><span>博客園是一個軟件開發的技術樂園，它於2004年創辦，這裡...<span>
那搜索引擎怎麼就知道誰是標題，誰是內容了呢？它又靠什麼去抓取標題呢?其實語義化不僅可以是標籤語義化,還可以延伸成結構語義化.舉例:
#left{float:left;margging-left:50px;}
#right{float:right;margin-top:100px;}
<div id=left>content..</div>
<div id=right>content..</div>
這個例子裡對id的命名稍微有點誇張,但是類似的情況卻使有的,當我們想把#left這個div放到頁面的右邊,和#right調換位置時,難道你可以把樣式改成這樣?
#left{float:right;margin-left:50px;}
#right{float:left;margin-top:100px;}
那樣看著多彆扭,多誤導人這兩個div的佈局啊.
應該寫成這樣.
<div id=main>content..</div>
<div id=sidebar>content..</div>
那樣既一目了然這幾個div裡是什麼內容也方便對其中的樣式進行修改.
二：(理論)語義化標籤怎麼樣？
1.結構更好，更利於搜索引擎的抓取（SEO的優化）和開發人員的維護(可維護性更高，因為結構清晰,so易於閱讀)。
2.更有利於特殊終端的閱讀(手機，個人助理等）。
三：(行動)語義化標籤怎麼辦？
盡量用有結構含義的,少用無語義的，如<span>,<div>無意義，看不出是什麼東西,可是<address>一看就知道這裡面的是地址,em標籤一看就知道這個是強調的內容,區分於不同內容。
那麼，怎麼判斷你的頁面是否符合Web標準之一：語義化標籤呢？你可以把你的頁面暫時去掉樣式後看可讀性怎麼樣，如果這個時候感覺你的頁面很亂，那就說明的的頁面的語義化標籤不怎麼樣，而如果你的頁面去掉樣式了感覺依然不是雜亂無章的，那麼，就說明你的頁面結構清晰，語義化標籤比較可以了。
這只是我的一點看法，希望拋磚引玉一下，看過的人把自己的想法也說出來，讓大家知道你的想法，也是完善此文。