摘要：代碼示例語義化語義化語義化語義化語義化年月日小維語義化標(biāo)簽包括還有等。而沒有語義化的元素如則推薦使用。語義化包含了標(biāo)簽語義化和命名語義化。

Web語義化是指使用恰當(dāng)語義的html標(biāo)簽、class類名等內(nèi)容，讓頁面具有良好的結(jié)構(gòu)與含義，從而讓人和機器都能快速理解網(wǎng)頁內(nèi)容。語義化的web頁面一方面可以讓機器在更少的人類干預(yù)情況下收集并研究網(wǎng)頁的信息，從而可以讀懂網(wǎng)頁的內(nèi)容，然后將收集匯總的信息進(jìn)行分析，結(jié)果為人類所用；另一方面它可以讓開發(fā)人員讀懂結(jié)構(gòu)和用戶以及屏幕閱讀器（如果訪客有視障）能夠讀懂內(nèi)容。
簡單來說就是利于 SEO，便于閱讀維護(hù)理解。

總結(jié)起來就是：

正確的標(biāo)簽做正確的事情

頁面內(nèi)容結(jié)構(gòu)化

無CSS樣子時也容易閱讀，便于閱讀維護(hù)和理解

便于瀏覽器、搜索引擎解析。 利于爬蟲標(biāo)記、利于SEO

HTML為網(wǎng)頁文檔內(nèi)容提供上下文結(jié)構(gòu)和含義。對于HTML體系而言，Web語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽，使頁面有良好的結(jié)構(gòu)，讓頁面元素有含義，便于被瀏覽器、搜索引擎解析、利于SEO。通常我們所說的HTML應(yīng)該是完全脫離表現(xiàn)信息的，其中的標(biāo)簽應(yīng)該都是語義化地定義了文檔的結(jié)構(gòu)。
代碼示例：

    
        

            

                
h1 - WEB 語義化
            
            
            

                section1 - HTML語義化
            
            

                section2 - CSS語義化
            
            time - 2018年03月23日
            
        
    

html語義化標(biāo)簽包括 body, article, nav, aside, section, header, footer, hgroup, 還有 h1-h6 address等。

下面來簡單介紹下常用的html語義化標(biāo)簽

header代表“網(wǎng)頁”或者“section”的頁眉，通常包含h1-h6 元素或者 hgroup, 作為整個頁面或者一個內(nèi)容快的標(biāo)題。也可以包裹一節(jié)的目錄部分，一個搜索框，一個nav，或者相關(guān)logo。

代碼示例：

    

        

            
網(wǎng)站標(biāo)題

            
網(wǎng)站副標(biāo)題
        
    

注意事項：

可以是“網(wǎng)頁”或者任意“section”的頭部部分

沒有個數(shù)限制

如果hgroup或者h(yuǎn)1-h6自己就能工作得很好，那么就沒必要用header。

hgroup 元素代表“網(wǎng)頁”或“section”的標(biāo)題，當(dāng)元素有多個層級時，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題組合

代碼示例：

    
這是一個主標(biāo)題
    
這是一個副標(biāo)題

注意事項：

如果只需要一個h1-h6標(biāo)簽就不用hgroup

如果有連續(xù)多個h1-h6標(biāo)簽就用hgroup

如果有連續(xù)多個標(biāo)題和其他文章數(shù)據(jù)，h1-h6標(biāo)簽就用hgroup包住，和其他文章元數(shù)據(jù)一起放入header標(biāo)簽

footer元素代表“網(wǎng)頁”或任意“section”的頁腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。如果footer元素包含了整個節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標(biāo)簽，類別等一些其他類似信息。

代碼示例：

注意事項：

可以是“網(wǎng)頁”或者任意“section”的底部部分

沒有個數(shù)限制，除了包裹的內(nèi)容不一樣，其他跟header類似

nav 元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。
代碼示例：

側(cè)邊欄上目錄、面包屑導(dǎo)航、搜索樣式、或者下一篇上一篇文章我們可能會想要用到nav，但是事實上規(guī)范上說nav只能用在頁面主要導(dǎo)航部分上。頁腳區(qū)域中的鏈接列表，雖然指向不同網(wǎng)站的不同區(qū)域，譬如服務(wù)條款，版權(quán)頁等，這些footer元素就能夠用了。

注意事項：

用于整個頁面的主要導(dǎo)航部分，不適合就不要用nav元素了

article 代表一個在文檔，頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨立開發(fā)或重用。
除了它的內(nèi)容，article會有一個標(biāo)題(通常會在header里)，一個footer頁腳。

代碼示例：

    
你好，我是這邊文章的標(biāo)題
    
你好，我是文章的內(nèi)容
    

這是一個最簡單的例子，如果在article內(nèi)部再嵌套article，那就代表內(nèi)嵌的article是與它外部的內(nèi)容有關(guān)聯(lián)的，如博客文章下面的評論，如下：

    

        
web 語義化
        
2018-03-23
    

    
文章內(nèi)容..

    

        
評論

        

            

                
評論者: 專業(yè)水軍
                
~1 min ago
            
            
還行
        

        

            

                
評論者: 大水怪
                
~1 hour ago
            
            
樓上說的對
        

    

article 內(nèi)部可以嵌套article，表示評論或者其他跟文章有關(guān)聯(lián)的內(nèi)容。article內(nèi)部還可以嵌套section，如下：

    
web語義化
    
什么是語義化？

    

        
語義化詳解
        
語義化就是。。。
    

    

        
語義化特點
        
語義化特點就是。。。
    

文章內(nèi)section是獨立的部分，但是它們只能算是組成整體的一部分，從屬關(guān)系，article是大主體，section是構(gòu)成這個大主體的一個部分。

注意事項：

自身獨立情況下：用article

是相關(guān)內(nèi)容： 用section

沒有語義的： 用div

section 元素代表文檔中的“節(jié)”或“段”，“段”可以是指一片文章里按照主題的分段；“節(jié)”可以是指一個頁面里的分組。section通常還帶標(biāo)題，雖然html5中section會自動給標(biāo)題h1-h6降級，但是最好手動給他們降級。

代碼示例：

    
section是啥？
    

        
關(guān)于section
        
section的介紹
        

            
關(guān)于其他
            
關(guān)于其他section的介紹
        
    

注意事項：

一張頁面可以用section劃分為簡介、文章條目和聯(lián)系信息。不過在文章內(nèi)頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利，可以用div。

表示文檔中的節(jié)或者段。

acticle、nav、aside可以理解為特殊的section，如果可以用article、nav、aside就不要用section，沒有實際意義的就用div

aside 元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料，標(biāo)簽，名詞解釋等。
在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以是日志串連，其他組的導(dǎo)航，甚至廣告，這些內(nèi)容相關(guān)的頁面。

代碼示例：

    
內(nèi)容
    

注意事項：

aside 在 article 內(nèi)表示主要內(nèi)容的附屬信息。

在article之外側(cè)可以做側(cè)邊欄，沒有article與之對應(yīng)，最好不用

如果是廣告，其他日志鏈接或者其他分類導(dǎo)航也可以用。

總之，HTML語義化是反對大篇幅使用無語義化的div+span+class，而鼓勵使用HTML定義好的語義化標(biāo)簽。

當(dāng)然，如果需要兼容低版本的IE瀏覽器，比如說IE8以及以下，那就需要考慮一些HTML5標(biāo)簽兼容性解決方案了。
更多標(biāo)簽及其兼容性請去往傳送門
html5標(biāo)簽列表傳送門

CSS語義就是class和ID命名的語義。class屬性作為HTML與CSS銜接的紐帶，其本意是用來描述元素內(nèi)容的。指用易于理解的名稱對html標(biāo)簽附加的class或id命名。如果說HTML語義化標(biāo)簽是給機器看的，那么CSS命名的語義化就是給人看的。良好的CSS命名方式減少溝通調(diào)試成本，易于理解。

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

就好像.main/.sidebar會比.left_content/.right_content的class命名靈活性更好。

    用戶名：小維




    用戶名:小維

看到這里，問題來了。既然CSS class和ID命名的語義化可以便于閱讀理解和減少溝通調(diào)試成本，那么我們是不是可以用div 結(jié)合class和ID語義化命名的方式來代替html的語義化？

代碼示例：

    
        

            

                
h1 - WEB 語義化
            
            

                

                    
nav1 - HTML語義化
                    
nav2 - CSS語義化
                
            
            

                section1 - HTML語義化
            
            

                section2 - CSS語義化
            
            
time - 2018年03月23日
            
 footer - by 小維
        
    

從代碼的層面上來看，使用CSS class語義化的命名也是能夠便于閱讀和維護(hù)的，但是這樣子并不利于SEO和屏幕閱讀器識別。

ARIA即Accessible Rich Internet Application，中文譯為無障礙富互聯(lián)網(wǎng)應(yīng)用。可以為一些有功能障礙（如聽力，視力）的人群通過屏幕閱讀器例如voiceover等，提供無障礙訪問動態(tài)、可交互Web內(nèi)容。

而應(yīng)用于HTML的ARIA有兩部分組成：role 和aria-* 。

其中，role標(biāo)識了一個元素的作用，aria-描述了與之有關(guān)的事物特征及其狀態(tài)。

ARIA的具體使用規(guī)則可見ARIA in HTML

W3C對ARIA無障礙Web規(guī)范這樣解釋：

    Web developers may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in [wai-aria-1.1], except where these conflict with the strong native semantics or are equal to the implicit ARIA semantics of a given HTML element.

    Setting an ARIA role and/or aria-* attribute that matches the implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser.

所以，如果使用的元素(HTML5)本身具有語義化，應(yīng)該使用這些元素，而不用再重新定義一個添加ARIA的角色、狀態(tài)或?qū)傩缘脑亍?br>例如：
nav已經(jīng)隱含ARIA的role="navigation"聲明，就不用在