一個得到廣泛推崇的東西，必然有它的優勢所在。Web語義化：

1、可以讓人一目瞭然這塊是什麼鬼，那塊是什麼鬼，對於專案的維護或者優化都是非常有意義的。

2、隨著HTML5語義化標籤的出現，我推測以後Web語義化對於SEO優化，還是非常有利的。也就是說，seo優化，必然也要考慮web語義化。如：<header></header>可以很好的代替傳統的
<div id="header"></div>。

那怎樣愉快的玩耍Web語義化呢？

1、標籤語義化，如在合適的地方用合適的語義化標籤，如頭部可用<header>、尾部可用<footer>；

2、命名語義化，包括HTML的id和class的命名，javascript相關命名；如#header{}、.footer{}、等。

一、主體

頭部：header     內容：content/container   尾部：footer      導航：nav    側欄：sidebar

欄目：column    整體佈局：wrapper      左右中：left / right / center     登入條：loginbar
標誌：logo     廣告：banner         頁面主體：main       熱點：hot     新聞：news

下載：download   子導航：subnav        選單：menu       子選單：submenu    搜尋：search

友情連結：friendlink   頁尾：footer    版權：copyright    滾動：scroll       標籤頁：tab

文章列表：list     提示資訊：msg      小技巧：tips    欄目標題：title      加入：join

指南：guild       服務：service      註冊：regsiter   狀態：status        投票：vote      合作伙伴：partner

二、css註釋的寫法

如內容區，Html註釋的寫法 ：<!--header頭部-- >

三、id的命名規範

1、頁面結構

容器: container    頁頭：header    內容：content/container    頁面主體：main     頁尾footer 
導航：nav        側欄：sidebar   欄目：column          頁面外圍控制整體佈局寬度：wrapper
左右中：left right center

2、導航
導航：nav                      主導航：mainnav       子導航：subnav               頂導航：topnav       邊導航：sidebar
左導航：leftsidebar       右導航：rightsidebar    選單：menu                 子選單：submenu       標題: title
摘要: summary

3、功能
標誌：logo                 廣告：banner           登陸：login              登入條：loginbar     註冊：regsiter搜尋：search              功能區：shop            標題：title                加入：joinus            狀態：status
按鈕：btn                    滾動：scroll           標籤頁：tab               文章列表：list          提示資訊：msg當前的: current          小技巧：tips              圖示: icon                  註釋：note              指南：guild
服務：service             熱點：hot                新聞：news              下載：download       投票：vote
合作伙伴：partner       友情連結：link      版權：copyright

 

4、class的命名:

    (1)顏色：使用顏色的名稱或者16進位制程式碼，如：

   .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }

    (2)字型大小，直接使用“font+字型大小”作為名稱，如：

   .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }

    (3)對齊樣式，使用對齊目標的英文名稱，如：

  .left { float:left; } .bottom { float:bottom; }

    (4)標題欄樣式，使用“類別+功能”的方式命名，如：

  .barnews { } .barproduct { }

5、注意事項：

     （1）一律小寫；

  （2）儘量用英文；

  （3）儘量不加中槓和下劃線；

  （4）儘量不縮寫，除非一看就明白的單詞，如：wrapper可以寫成wrap。

  （5）css檔案命名規範：

主要的 master.css；  模組 module.css；  基本共用 base.css；   佈局，版面layout.css；

主題 themes.css；   專欄 columns.css；  文字 font.css；     表單 forms.css；

補丁 mend.css；     列印print.css