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

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

總結起來就是：

正確的標簽做正確的事情

頁面內(nèi)容結構化

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

便于瀏覽器、搜索引擎解析。 利于爬蟲標記、利于SEO

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

    
        

            

                
h1 - WEB 語義化
            
            
            

                section1 - HTML語義化
            
            

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

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

下面來簡單介紹下常用的html語義化標簽

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

代碼示例：

    

        

            
網(wǎng)站標題

            
網(wǎng)站副標題
        
    

注意事項：

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

沒有個數(shù)限制

如果hgroup或者h1-h6自己就能工作得很好，那么就沒必要用header。

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

代碼示例：

    
這是一個主標題
    
這是一個副標題

注意事項：

如果只需要一個h1-h6標簽就不用hgroup

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

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

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

代碼示例：

注意事項：

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

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

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

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

注意事項：

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

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

代碼示例：

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

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

    

        
web 語義化
        
2018-03-23
    

    
文章內(nèi)容..

    

        
評論

        

            

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

        

            

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

    

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

    
web語義化
    
什么是語義化？

    

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

    

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

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

注意事項：

自身獨立情況下：用article

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

沒有語義的： 用div

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

代碼示例：

    
section是啥？
    

        
關于section
        
section的介紹
        

            
關于其他
            
關于其他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)容可以是與當前文章有關的相關資料，標簽，名詞解釋等。
在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內(nèi)容可以是日志串連，其他組的導航，甚至廣告，這些內(nèi)容相關的頁面。

代碼示例：

    
內(nèi)容
    

注意事項：

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

在article之外側可以做側邊欄，沒有article與之對應，最好不用

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

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

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

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

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

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

    用戶名：小維




    用戶名:小維

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

代碼示例：

    
        

            

                
h1 - WEB 語義化
            
            

                

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

                section1 - HTML語義化
            
            

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

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

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

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

其中，role標識了一個元素的作用，aria-描述了與之有關的事物特征及其狀態(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)本身具有語義化，應該使用這些元素，而不用再重新定義一個添加ARIA的角色、狀態(tài)或?qū)傩缘脑亍?br>例如：
nav已經(jīng)隱含ARIA的role="navigation"聲明，就不用在