本題地址：https://github.com/YvetteLau/Step-By-Step/issues/8
語義化意味著顧名思義，HTML5的語義化指的是合理使用語義化的標(biāo)簽來創(chuàng)建頁面結(jié)構(gòu)，如header,footer,nav，從標(biāo)簽上即可以直觀的知道這個(gè)標(biāo)簽的作用，而不是濫用div。
語義化的優(yōu)點(diǎn)有:
- 代碼結(jié)構(gòu)清晰，易于閱讀，利于開發(fā)和維護(hù)
- 提高用于體驗(yàn)，在樣式加載失敗時(shí)，頁面結(jié)構(gòu)清晰
- 方便其他設(shè)備解析（如屏幕閱讀器）根據(jù)語義渲染網(wǎng)頁。
- 有利于搜索引擎優(yōu)化（SEO），搜索引擎爬蟲會(huì)根據(jù)不同的標(biāo)簽來賦予不同的權(quán)重
語義化標(biāo)簽主要有：
- title：主要用于頁面的頭部的信息介紹
- header：定義文檔的頁眉
- nav：主要用于頁面導(dǎo)航
- main：規(guī)定文檔的主要內(nèi)容。對于文檔來說應(yīng)當(dāng)是唯一的。它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，比如側(cè)欄、導(dǎo)航欄、版權(quán)信息、站點(diǎn)標(biāo)志或搜索表單。
- article：獨(dú)立的自包含內(nèi)容
- h1~h6：定義標(biāo)題
- ul: 用來定義無序列表
- ol: 用來定義有序列表
- address：定義文檔或文章的作者/擁有者的聯(lián)系信息。
- canvas：用于繪制圖像
- dialog：定義一個(gè)對話框、確認(rèn)框或窗口
- aside：定義其所處內(nèi)容之外的內(nèi)容。
<aside>的內(nèi)容可用作文章的側(cè)欄。 - section：定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
- figure：規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。figure 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對文檔流產(chǎn)生影響。
- details：描述文檔或者文檔某一部分細(xì)節(jié)
- mark：義帶有記號(hào)的文本。
語義化應(yīng)用
例如使用可視化標(biāo)簽，構(gòu)建下面的頁面結(jié)構(gòu)：
對于早期不支持HTML5的瀏覽器，如IE8及更早之前的版本，我們可以引入 html5shiv 來支持。
