簡單討論HTML語義化（語義化標簽）

2024-04-27 15:12:55

字體：大中小

來源：轉載

供稿：網友

隨著WEB標準在國內的不斷普及，結構表現行為、分離、模塊化、語義化、優雅退化等概念也成為考核一名前端人員對WEB標準理解的重要條目，其中，由于SEO背后的商業價值影響，“語義化”得到了突出的重視。

I、什么是HTML語義化

” 語義化“指的是計算機在更少的人類干預下能夠收集和分析信息，讓網頁能夠被計算機理解，簡單點就是根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓網絡爬蟲和計算機更好地解析。通俗點講就是：“不要把水果當成蔬菜”。下面是粗淺的實例：

我們應該水果當水果，蔬菜當蔬菜是吧！?。?img src="http://s1.vevb.com/20170206/b15uwvah2ez16.png" alt="">注：以上語法錯誤的，這樣只是更能生動地理解什么是“語義化”。

II、語義化的意義（為什么要語義化）

文檔結構--為了在沒有CSS的情況下，頁面也能很好地將內容結構、代碼結構呈現，并選用最符合內容意義的標簽，多推敲內容的意義而不是僅僅根據頁面效果圖做出判斷。命名規則--例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用，對于ID和Class的規范的命名方案，網上時有出現，總體的原則還是根據內容的意義來做命名，語義化的命名優勢顯而易見。SEO--有利于SEO和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息，爬蟲依賴于標簽來確定上下文和各個關鍵字的權重。設備解析--方便其它設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；便于個人和團隊維護--語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

III、如何實現語義化（寫HTML時應該注意什么）

盡可能少的使用無語義的標簽div和span；在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利。不要使用純樣式標簽，如：b、font、u等，改用css設置，更好得實現內容、樣式分離。需要重點突出、強調的文本，可以包含在strong或者em標簽中（盡量用CSS設置），strong默認樣式是加粗（不要用b），em是斜體（不用i）；表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途。每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for="inputld"來讓說明文本和相對應的input關聯起來。