在HTML5 中有一個(gè)很重要的概念，叫做HTML5 大綱算法(HTML5 Outliner)，它的用途是為用戶提供一份頁面的信息結(jié)構(gòu)目錄。比如我們經(jīng)常使用的手冊就是一個(gè)非常好的大綱結(jié)構(gòu)
合理的使用HTML5 元素標(biāo)簽，可以生成一個(gè)非常清晰的文檔大綱，我們可以通過各種工具去查看當(dāng)前頁面，比如谷歌和火狐的插件可以查看當(dāng)前的HTML5 大綱。這里推薦使用一個(gè)服務(wù)器端的測試工具：
HTML5 Outliner，網(wǎng)址如下：
測試工具：https://gsnedders.html5.org/outliner/
這個(gè)工具可以上傳本地html 文件，也可以填寫URL，或者直接在多行文本框上編寫HTML5 代碼均可了解大綱。

section和div的區(qū)別
div 元素在html5 之前就是非常常用的標(biāo)簽，它本身沒有任何語義，用來頁面布局和CSS 樣式以及JS 調(diào)用。那么，div 的用途已經(jīng)說的很清楚了：

• 1.如果是頁面布局，且不是header、footer 之類的專屬區(qū)域，都應(yīng)該使用div；
• 2.如果只是單純的對一個(gè)端內(nèi)容進(jìn)行CSS 樣式定義，那么也應(yīng)該使用div;
• 3.如果想對一段內(nèi)容進(jìn)行JS 控制，那么也應(yīng)該使用div。

html5 中，section 并不是用來取代div 的。它是具有語義的文檔標(biāo)簽。表示一段文檔中的章節(jié)，比如包含一個(gè)標(biāo)題和一個(gè)段落，而大綱規(guī)范中，至少要包含一個(gè)標(biāo)題。section 至少需要一個(gè)h1 ~ h6
header 元素不需要強(qiáng)制標(biāo)題h1 ~ h6，如果有標(biāo)題，算body 的。這樣主大綱標(biāo)題就有了
section 和nav 元素大綱要求有標(biāo)題h1 ~ h6，但section 必須有才規(guī)范，而nav如果沒有標(biāo)題，也是合理的。當(dāng)然，添加上標(biāo)題會讓大綱更加好看，頁面中可以隱藏。