什么是Web語義化
Web語義化是指使用恰當語義的html標簽、class類名等內容，讓頁面具有良好的結構與含義，從而讓人和機器都能快速理解網頁內容。語義化的web頁面一方面可以讓機器在更少的人類干預情況下收集並研究網頁的信息，從而可以讀懂網頁的內容，然后將收集匯總的信息進行分析，結果為人類所用；另一方面它可以讓開發人員讀懂結構和用戶以及屏幕閱讀器（如果訪客有視障）能夠讀懂內容。
簡單來說就是利於 SEO，便於閱讀維護理解。
總結起來就是：
- 正確的標簽做正確的事情
- 頁面內容結構化
- 無CSS樣子時也容易閱讀，便於閱讀維護和理解
- 便於瀏覽器、搜索引擎解析。 利於爬蟲標記、利於SEO
html 語義化標簽
HTML為網頁文檔內容提供上下文結構和含義。對於HTML體系而言，Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，讓頁面元素有含義，便於被瀏覽器、搜索引擎解析、利於SEO。通常我們所說的HTML應該是完全脫離表現信息的，其中的標簽應該都是語義化地定義了文檔的結構。
代碼示例：
<html>
<body>
<article>
<header>
<h1>h1 - WEB 語義化</h1>
</header>
<nav>
<ul>
<li>nav1 - HTML語義化</li>
<li>nav2 - CSS語義化</li>
</ul>
</nav>
<section>
section1 - HTML語義化
</section>
<section>
section2 - CSS語義化
</section>
<time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
<footer> footer - by 小維</footer>
</article>
</body>
</html>
html語義化標簽包括 body, article, nav, aside, section, header, footer, hgroup, 還有 h1-h6 address等。
下面來簡單介紹下常用的html語義化標簽
header 元素
header代表“網頁”或者“section”的頁眉，通常包含h1-h6 元素或者 hgroup, 作為整個頁面或者一個內容快的標題。也可以包裹一節的目錄部分，一個搜索框，一個nav，或者相關logo。
代碼示例：
<header>
<hgroup>
<h1>網站標題<h1>
<h2>網站副標題</h2>
</hgroup>
<header>
注意事項：
- 可以是“網頁”或者任意“section”的頭部部分
- 沒有個數限制
- 如果hgroup或者h1-h6自己就能工作得很好，那么就沒必要用header。
hgroup 元素
hgroup 元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題組合
代碼示例：
<hgroup>
<h1>這是一個主標題</h1>
<h2>這是一個副標題</h2>
</hgroup>
注意事項：
- 如果只需要一個h1-h6標簽就不用hgroup
- 如果有連續多個h1-h6標簽就用hgroup
- 如果有連續多個標題和其他文章數據，h1-h6標簽就用hgroup包住，和其他文章元數據一起放入header標簽
footer 元素
footer元素代表“網頁”或任意“section”的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。如果footer元素包含了整個節，那么它們就代表附錄，索引，提拔，許可協議，標簽，類別等一些其他類似信息。
代碼示例：
<footer>
COPYRGHT@小維
</footer>
注意事項：
- 可以是“網頁”或者任意“section”的底部部分
- 沒有個數限制，除了包裹的內容不一樣，其他跟header類似
nav 元素
nav 元素代表頁面的導航鏈接區域。用於定義頁面的主要導航部分。
代碼示例：
<nav>
<ul>
<li>HTML語義化</li>
<li>CSS 語義化</li>
</ul>
</nav>
側邊欄上目錄、面包屑導航、搜索樣式、或者下一篇上一篇文章我們可能會想要用到nav，但是事實上規范上說nav只能用在頁面主要導航部分上。頁腳區域中的鏈接列表，雖然指向不同網站的不同區域，譬如服務條款，版權頁等，這些footer元素就能夠用了。
注意事項：
- 用於整個頁面的主要導航部分，不適合就不要用nav元素了
article 元素
article 代表一個在文檔，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。
除了它的內容，article會有一個標題(通常會在header里)，一個footer頁腳。
代碼示例：
<article>
<h1>你好，我是這邊文章的標題</h1>
<p>你好，我是文章的內容</p>
<footer>
<p>最終解釋權歸XXX所有</p>
</footer>
</article>
這是一個最簡單的例子，如果在article內部再嵌套article，那就代表內嵌的article是與它外部的內容有關聯的，如博客文章下面的評論，如下：
<article>
<header>
<h1>web 語義化</h1>
<p><time pubdate datetime="2018-03-23">2018-03-23</time></p>
</header>
<p>文章內容..</p>
<article>
<h2>評論</h2>
<article>
<header>
<h3>評論者: 專業水軍</h3>
<p><time pubdate datetime="2018-03-23T15:10-08:00">~1 min ago</time></p>
</header>
<p>還行</p>
</article>
<article>
<header>
<h3>評論者: 大水怪</h3>
<p><time pubdate datetime="2018-03-23T15:10-08:00">~1 hour ago</time></p>
</header>
<p>樓上說的對</p>
</article>
</article>
</article>
article 內部可以嵌套article，表示評論或者其他跟文章有關聯的內容。article內部還可以嵌套section，如下：
<article>
<h1>web語義化</h1>
<p>什么是語義化？</p>
<section>
<h2>語義化詳解</h2>
<p>語義化就是。。。</p>
</section>
<section>
<h2>語義化特點</h2>
<p>語義化特點就是。。。</p>
</section>
</article>
文章內section是獨立的部分，但是它們只能算是組成整體的一部分，從屬關系，article是大主體，section是構成這個大主體的一個部分。
注意事項：
- 自身獨立情況下：用article
- 是相關內容： 用section
- 沒有語義的： 用div
section 元素
section 元素代表文檔中的“節”或“段”，“段”可以是指一片文章里按照主題的分段；“節”可以是指一個頁面里的分組。section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。
代碼示例：
<section>
<h1>section是啥？</h1>
<article>
<h2>關於section</h2>
<p>section的介紹</p>
<section>
<h3>關於其他</h3>
<p>關於其他section的介紹</p>
</section>
</article>
</section>
注意事項：
- 一張頁面可以用section划分為簡介、文章條目和聯系信息。不過在文章內頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利，可以用div。
- 表示文檔中的節或者段。
- acticle、nav、aside可以理解為特殊的section，如果可以用article、nav、aside就不要用section，沒有實際意義的就用div
aside元素
aside 元素被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料，標簽，名詞解釋等。
在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以是日志串連，其他組的導航，甚至廣告，這些內容相關的頁面。
代碼示例：
<article>
<p>內容</p>
<aside>
<h1>作者簡介</h1>
<p>小維,哈哈哈</p>
</aside>
</article>
注意事項：
- aside 在 article 內表示主要內容的附屬信息。
- 在article之外側可以做側邊欄，沒有article與之對應，最好不用
- 如果是廣告，其他日志鏈接或者其他分類導航也可以用。
html語義化小結
總之，HTML語義化是反對大篇幅使用無語義化的div+span+class，而鼓勵使用HTML定義好的語義化標簽。
當然，如果需要兼容低版本的IE瀏覽器，比如說IE8以及以下，那就需要考慮一些HTML5標簽兼容性解決方案了。
更多標簽及其兼容性請去往傳送門
html5標簽列表傳送門
CSS語義化
CSS語義就是class和ID命名的語義。class屬性作為HTML與CSS銜接的紐帶，其本意是用來描述元素內容的。指用易於理解的名稱對html標簽附加的class或id命名。如果說HTML語義化標簽是給機器看的，那么CSS命名的語義化就是給人看的。良好的CSS命名方式減少溝通調試成本，易於理解。
CSS命名首先要滿足W3C的命名規范和團隊的命名規范。其次是高效和可重用性。
就好像.main/.sidebar會比.left_content/.right_content的class命名靈活性更好。
<!-- 以表現為中心 -->
<div class="ft margin10">
<span>用戶名：小維</span>
<div>
<!-- 以信息為中心 -->
<p class="user_info">
<em>用戶名:小維</em>
<p>
看到這里，問題來了。既然CSS class和ID命名的語義化可以便於閱讀理解和減少溝通調試成本，那么我們是不是可以用div 結合class和ID語義化命名的方式來代替html的語義化？
代碼示例：
<html>
<body>
<div class="article">
<div class="header">
<h1>h1 - WEB 語義化</h1>
</div>
<div class="nav">
<ul>
<li>nav1 - HTML語義化</li>
<li>nav2 - CSS語義化</li>
</ul>
</div>
<div class="section">
section1 - HTML語義化
</div>
<div class="section">
section2 - CSS語義化
</div>
<div class="time">time - 2018年03月23日</div>
<div class="footer"> footer - by 小維</div>
</div>
</body>
</html>
從代碼的層面上來看，使用CSS class語義化的命名也是能夠便於閱讀和維護的，但是這樣子並不利於SEO和屏幕閱讀器識別。
知識拓展——ARIA
ARIA即Accessible Rich Internet Application，中文譯為無障礙富互聯網應用。可以為一些有功能障礙（如聽力，視力）的人群通過屏幕閱讀器例如voiceover等，提供無障礙訪問動態、可交互Web內容。
而應用於HTML的ARIA有兩部分組成：role 和aria-* 。
其中，role標識了一個元素的作用，aria-描述了與之有關的事物特征及其狀態。
ARIA的具體使用規則可見ARIA in HTML
W3C對ARIA無障礙Web規范這樣解釋：
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的角色、狀態或屬性的元素。
例如：
nav已經隱含ARIA的role="navigation"聲明，就不用在