HTML語義化標籤，html語義標籤

HTML語義化標籤，html語義標籤

 總所周知，現在的網頁是由HTML、CSS、JS三大元素組成，而HTML是其中最重要的部分，是整個網頁的骨架，CSS和js在骨架的基礎上進行相應的修飾，使得網頁成為一個有血有肉，可以動的“人”。如果HTML設計不合理，則類似一個骨骼不健全的人，即使外表再怎麼修飾，也掩蓋不了他明顯的缺陷。

    HTML標籤都是帶有語義考慮的，例如table語義為“表格”、tr為“單元行”、td為“儲存格”。判斷一個網頁標籤語義是否良好的一個簡單方位就是：“去掉樣式，看網頁結構是否良好有序，是否任然具有很好的可讀性”。一個語義良好的頁面，h標籤應該是完整有序沒有斷層的，按照h1、h2、h3、h4這樣依次排列下來。在工作中可以使用web Developer或者firebug進行查看。W3C的官方網站就是一個典型的語義良好的標榜，http://www.w3.org/。

   以下是去掉樣式的W3C的官網

  

為了保證網頁去樣式後的可讀性，並且又符合web標準，應該注意一下幾點：

     1  儘可能少的使用無語義的標籤div和span；

     2  在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；

     3  不要使用純樣式標籤，如：b、font、u等，改用css設定。

     4  需要強調的文本，可以包含在strong或者em標籤中，strong預設樣式是加粗，而em是斜體；

     5  使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般儲存格要區分開，表頭用th，儲存格用td；

     6  表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；

     7  每個input標籤對應的說明文本都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文本和相對應的input關聯起來；