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

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

總結(jié)起來(lái)就是：

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

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

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

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

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

    
        

            

                
h1 - WEB 語(yǔ)義化
            
            
            

                section1 - HTML語(yǔ)義化
            
            

                section2 - CSS語(yǔ)義化
            
            time - 2018年03月23日
            
        
    

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

下面來(lái)簡(jiǎn)單介紹下常用的html語(yǔ)義化標(biāo)簽

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

代碼示例：

    

        

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

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

注意事項(xiàng)：

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

沒(méi)有個(gè)數(shù)限制

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

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

代碼示例：

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

注意事項(xiàng)：

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

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

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

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

代碼示例：

注意事項(xiàng)：

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

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

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

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

注意事項(xiàng)：

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

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

代碼示例：

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

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

    

        
web 語(yǔ)義化
        
2018-03-23
    

    
文章內(nèi)容..

    

        
評(píng)論

        

            

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

        

            

                
評(píng)論者: 大水怪
                
~1 hour ago
            
            
樓上說(shuō)的對(duì)
        

    

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

    
web語(yǔ)義化
    
什么是語(yǔ)義化？

    

        
語(yǔ)義化詳解
        
語(yǔ)義化就是。。。
    

    

        
語(yǔ)義化特點(diǎn)
        
語(yǔ)義化特點(diǎn)就是。。。
    

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

注意事項(xiàng)：

自身獨(dú)立情況下：用article

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

沒(méi)有語(yǔ)義的： 用div

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

代碼示例：

    
section是啥？
    

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

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

注意事項(xiàng)：

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

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

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

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

代碼示例：

    
內(nèi)容
    

注意事項(xiàng)：

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

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

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

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

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

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

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

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

    用戶名：小維




    用戶名:小維

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

代碼示例：

    
        

            

                
h1 - WEB 語(yǔ)義化
            
            

                

                    
nav1 - HTML語(yǔ)義化
                    
nav2 - CSS語(yǔ)義化
                
            
            

                section1 - HTML語(yǔ)義化
            
            

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

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

ARIA即Accessible Rich Internet Application，中文譯為無(wú)障礙富互聯(lián)網(wǎng)應(yīng)用?？梢詾橐恍┯泄δ苷系K（如聽(tīng)力，視力）的人群通過(guò)屏幕閱讀器例如voiceover等，提供無(wú)障礙訪問(wèn)動(dòng)態(tài)、可交互Web內(nèi)容。

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

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

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

W3C對(duì)ARIA無(wú)障礙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ǔ)義化，應(yīng)該使用這些元素，而不用再重新定義一個(gè)添加ARIA的角色、狀態(tài)或?qū)傩缘脑亍?br>例如：
nav已經(jīng)隱含ARIA的role="navigation"聲明，就不用在