HTML5 Sectioning Elements Ping-Yen Tsai 1 / 25 

台灣 2011 / 6 - 2012 很多人研究 原因一 HTML5 正夯 2 / 25 1 / 25 

2 / 25 原因二 Yahoo! 奇摩搜尋引擎 Powered By Bing 3 / 25 

3 / 25 10% Bucket 2011/12 GA 4 / 25 

4 / 25 台灣某 BSP 2011/12 與 2012/2 相比 從 Yahoo! 奇摩搜尋引擎來的流量 -60% 一個月 PV 少了 600 萬 5 / 25 

5 / 25 怎麼辦？ 翻 Bing SEO 文件 Semantic HTML 6 / 25 

6 / 25 HTML5 Sectioning Elements 目的 解決兩個問題 1. 不知道 的範圍 2.

沒有 7 / 25 

7 / 25 飲料店寄賣茶葉 農藥殘留超標 不知道 的範圍 < h 1 > 飲料店寄賣茶葉 農藥殘留超標< / h 1 > < p > 〔自由時報記者賴筱桐／新北報導〕新北市衛生局四 . . . 。< / p > < h 2 > 全面下架銷毀 罰三萬元< / h 2 > < p > 茶品小村販售的高山茶葉分別檢出殘留農藥「亞滅培」六．三p p m ， . . . 。< / p > < p > 衛生局食品藥物管理科科長林冠蓁說 . . . 。< / p > < p > 林冠蓁指出，「亞滅培」是殺蟲劑，毒性較低， . . . 。< / p > 知道 範圍 < a r t i c l e > < h 1 > 飲料店寄賣茶葉 農藥殘留超標< / h 1 > < p > 〔自由時報記者賴筱桐／新北報導〕新北市衛生局四 . . . 。< / p > < s e c t i o n > < h 2 > 全面下架銷毀 罰三萬元< / h 2 > < p > 茶品小村販售的高山茶葉分別檢出殘留農藥「亞滅培」六．三p p m ， . . . 。< / p > < p > 衛生局食品藥物管理科科長林冠蓁說 . . . 。< / p > < / s e c t i o n > < p > 林冠蓁指出，「亞滅培」是殺蟲劑，毒性較低， . . . 。< / p > < / a r t i c l e > 8 / 25 

8 / 25

沒有 < a r t i c l e > < h 1 > 飲料店寄賣茶葉 農藥殘留超標< / h 1 > < p > 〔自由時報記者賴筱桐／新北報導〕新北市衛生局四 . . . 。< / p > < s e c t i o n > < h 1 > 全面下架銷毀 罰三萬元< / h 1 > < p > 茶品小村販售的高山茶葉分別檢出殘留農藥「亞滅培」六．三p p m ， . . . 。< / p > < p > 衛生局食品藥物管理科科長林冠蓁說 . . . 。< / p > < / s e c t i o n > < p > 林冠蓁指出，「亞滅培」是殺蟲劑，毒性較低， . . . 。< / p > < / a r t i c l e > 注意 有兩個

9 / 25 

9 / 25

沒有 < a r t i c l e > < h 1 > 飲料店寄賣茶葉 農藥殘留超標< / h 1 > < p > 〔自由時報記者賴筱桐／新北報導〕新北市衛生局四 . . . 。< / p > < s e c t i o n > < h 2 > 全面下架銷毀 罰三萬元< / h 2 > < p > 茶品小村販售的高山茶葉分別檢出殘留農藥「亞滅培」六．三p p m ， . . . 。< / p > < p > 衛生局食品藥物管理科科長林冠蓁說 . . . 。< / p > < / s e c t i o n > < p > 林冠蓁指出，「亞滅培」是殺蟲劑，毒性較低， . . . 。< / p > < / a r t i c l e >

也 OK 會找 Sectioning Element 裡最大的當 Heading 10 / 25 

10 / 25 HTML5 Sectioning Elements 11 / 25 

11 / 25 注意 不是 Sectioning Elements 它們只是比較有語義的 DIV 12 / 25 

12 / 25 Sectioning Elements 裡可以再出現 < a r t i c l e > < h e a d e r > < h 1 > 主標題< / h 1 > < p > 副標題< / p > < / h e a d e r > < p > 本文< / p > < / a r t i c l e > 13 / 25 

13 / 25 一個網頁只能出現一次 指明 裡的 14 / 25 

14 / 25 導覽列 < n a v > < u l > < l i > 政治< / l i > < l i > 財經< / l i > < l i > 娛樂< / l i > < / u l > < / n a v > 15 / 25 

15 / 25 側欄 或 可與主內容分開的內容 16 / 25 

16 / 25 文章 / Entry / Widget 17 / 25 

17 / 25 章節 18 / 25 

18 / 25 裡面可以沒有 heading 裡面一定要有 19 / 25 

19 / 25 HTML5 Doctor Document Outlines The article element The section element Aside Revisited Semantic navigation with the nav element The figure & figcaption elements You can still use div Avoiding common HTML5 mistakes 20 / 25 

20 / 25 HTML5 Element Flowchart 21 / 25 

21 / 25 HTML5 Outliner 22 / 25 

22 / 25 Section Root Elements

23 / 25 

23 / 25 讓 IE 支援 HTML5 新標籤 html5shiv.js 要在 HTML5 新標籤出現前執行 document.createElement('article'); 24 / 25 

24 / 25 用途 搜尋引擎外網站 SEO 搜尋引擎 內建 HTML5 Outliner 抓網頁 Outline 25 / 25