Web語意化的深入理解

簡述

    Web 語義化是指使用恰當語義的 HTML 標籤、Class 類名等內容,讓頁面具有良好的結構與含義,從而讓人和機器都能快速理解網頁內容。語義化的 Web 頁面一方面可以讓機器在更少的人類干預情況下收集並研究網頁的信息,從而可以讀懂網頁的內容,然後將收集彙總的信息進行分析,結果爲人類所用;另一方面它可以讓開發人員讀懂結構和用戶以及屏幕閱讀器(如果訪客有視障)能夠讀懂內容。簡單來說就是利於 SEO(搜索引擎優化),便於閱讀維護理解。

    Web 語義化包含了 HTML 標籤的語義化和 Css 命名的語義化

HTML語義化

    HTML 爲網頁文檔內容提供上下文結構和含義。對於 HTML 體系而言,Web 語義化是指使用語義恰當的標籤,使頁面有良好的結構,讓頁面元素有含義,便於被瀏覽器、搜索引擎解析、利於 SEO。通常我們所說的 HTML 應該是完全脫離表現信息的,其中的標籤應該都是語義化地定義了文檔的結構。

    HTML 語義化標籤包括 body,article,nav,aside,section,header,footer,hgroup,還有 h1 - h6,address等

CSS語義化

    CSS語義就是class和ID命名的語義。Class 屬性作爲 HTML 與 CSS 銜接的紐帶,其本意是用來描述元素內容的。指用易於理解的名稱對html標籤附加的 Class 或 id 命名。如果說 HTML 語義化標籤是給機器看的,那麼 CSS 命名的語義化就是給人看的。良好的 CSS 命名方式減少溝通調試成本,易於理解。

    CSS 命名首先要滿足 W3C 的命名規範和團隊的命名規範。其次是高效和可重用性

語義化的好處

    1. 有利於 SEO,因爲搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重

    2. 方便其他設備解析,以有意義的方式來渲染網頁

    3. 去掉或者丟失樣式的時候,頁面也能呈現出很好的內容結構

    4. 便於團隊開發和維護,語義化更具有可讀性

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章