Semantic Element

1.什么是語義化

根據內容的結構，選擇合適的標簽（代碼語義化）便于開發者閱讀。寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

語義（semantic）　

語義化標記，是指每種標記表示一種特定的內容形態，例如標題、列表、表格等。與之對應的概念，是樣式標記（presentational markup）。

Tim最初設想HTML應該是一種純語義化的標記語言，然而在混沌無序的初始階段，各家瀏覽器廠商多少受到另一種通行多年的標記語言SGML的影響，由于該語言同時存在語義化標記和樣式標記，于是早期的HTML也被設計成了兩類標記的雜合體。

不過隨著90年代末CSS的逐步應用以及隨之而起的“內容與表現分離”理念，樣式標記在新的HTML版本中被逐漸廢除，但出于向后兼容的考慮，仍然有部分樣式標記被保留，例如：i（樣式）/ em（語義）；b（樣式）/ strong（語義）。

2.為什么要語義化

• 語言性質: HTML本身就是語義化標記語言，使用符合語義的標記，才談得上正確使用HTML
• 可訪問性: 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
• 有利于SEO: 和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息。爬蟲依賴于標簽來確定上下文和各個關鍵字的權重。
• 增強擴展性: 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁。
• 便于開發和維護: 語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

3.寫HTML代碼時應注意什么？

• 盡可能少的使用無語義的標簽如：div、span；
• 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
• 不要使用純樣式標簽，如：b、font、u等，改用css設置。
• 表單域要用fieldset標簽包起來，并說明表單的用途；

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

  Tags	Description
  <thead>	Specifies a table header
  <tbody>	Specifies a table body
  <td>	Specifies a table cell
  <tr>	Specifies a table row
  <th>	Specifies a table header
  <tfoot>	Specifies a table footer

• 過分使用diV標簽，html的語義化很不好，div 是一個沒有語義的標簽，但是沒有語義不代表沒有意義，建議div只用來構建布局，除此之外盡量少用。
• Div與span在html中都是用在輔助布局的，都是沒有語義的，不同點是，div是塊元素，span是內聯元素，從邏輯結構上講，div 用來劃分塊元素，span用來劃分內聯元素。把<a>里邊套一個<span>我們常用的技巧。檢查Html頁面是否語義化最好的方法, 便是去掉頁面的Css鏈接, 看網頁結構是否井然有序, 頁面是否仍然有很好的可讀性。