談談你對HTML語義化的理解。


1.什么是HTML語義化?

基本上都是圍繞着幾個主要的標簽,像標題(h1-h6),列表(li),強調(strong em)等。

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

2.為什么要語義化?

  • 為了在沒有css的情況下,頁面也能呈現出很好的內容結構和代碼結構。
  • 為了提升用戶體驗,如:title,alt用於解釋名詞或解釋圖片信息,lable標簽的活用。
  • 有利於和搜索引擎建立良好的溝通。
  • 方便其他設備解析(如屏幕閱讀器,盲人閱讀器,移動設備),以意義的方式來渲染網頁。
  • 便於團隊的開發和維護,語義化更具有可讀性,是下一步網頁的重要動向,遵循W3C標准的團隊都遵循這個標准,可以減少差異化。

3.寫HTML代碼是應注意什么?

  • 盡可能少的使用無語義的標簽div和span
  • 在語義不明顯時,既可以使用div或者時,盡量用p,因為p在默認情況下有上下間距,對兼容特殊終端有利。
  • 不要使用純樣式的標簽,如:b,font,u等,改用css設置。
  • 需要強調的文本,可以包含在strong(加粗)或者em(斜體)標簽中(瀏覽器預設樣式,能用css樣式就不用它們)
  • 使用表格,標題要用caption,表頭用thead,主體部分用tbody包圍,尾部要tfoot包圍。表頭和一般單元格要區分開,表頭用th,單元格用td
  • 表單域要用fieldset標簽包起來,並用legend標簽說明標簽的用途。
  • 每個input標簽對應的文本框都需要使用label標簽,並且通過為input設置id屬性,在label標簽中設置for=someID來說明文本和相對應的input關聯起來

簡單來說就是:用正確的標簽做正確的事情。html語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器,搜索引擎解析;即使在沒有css樣式的情況下,也以一種文檔格式顯示,並且是容易閱讀的;搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重,利於SEO;使閱讀源代碼的人對網站更容易將網站分塊,便於閱讀維護理解。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM