HTML5 Sectioning Elements

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. 不知道
<heading> 的範圍 2. <h1> <h2> <h3> <h4> <h5> <h6> 沒有 <h7> 7 / 25

7 / 25 飲料店寄賣茶葉農藥殘留超標不知道 <heading> 的範圍 < h
1 > 飲料店寄賣茶葉農藥殘留超標< / h 1 > < p > 〔自由時報記者賴筱桐／新北報導〕新北市衛生局四 . . . 。< / p > < h 2 > 全面下架銷毀罰三萬元< / h 2 > < p > 茶品小村販售的高山茶葉分別檢出殘留農藥「亞滅培」六．三p p m ， . . . 。< / p > < p > 衛生局食品藥物管理科科長林冠蓁說 . . . 。< / p > < p > 林冠蓁指出，「亞滅培」是殺蟲劑，毒性較低， . . . 。< / p > 知道 <heading> 範圍 < 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 <h1> <h2> <h3> <h4> <h5> <h6> 沒有
<h7> < 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 > 注意有兩個 <h1> 9 / 25

9 / 25 <h1> <h2> <h3> <h4> <h5> <h6> 沒有
<h7> < 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 > <h1> <h2> 也 OK 會找 Sectioning Element 裡最大的當 Heading 10 / 25

10 / 25 HTML5 Sectioning Elements <article> <section> <nav> <aside>
11 / 25

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

12 / 25 Sectioning Elements 裡可以再出現 <header> <footer> < 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 <main> 一個網頁只能出現一次指明 <body> 裡的 <main> 14
/ 25

14 / 25 <nav> 導覽列 < 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 <aside> 側欄或可與主內容分開的內容 16 / 25

16 / 25 <article> 文章 / Entry / Widget 17
/ 25

17 / 25 <section> 章節 18 / 25

18 / 25 <nav> <aside> 裡面可以沒有 heading <article> <section> 裡面一定要有
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 <body> <figure> <blockquote> 23
/ 25

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

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

HTML5 Sectioning Elements

HTML5 Sectioning Elements

Ping-Yen Tsai

More Decks by Ping-Yen Tsai

Other Decks in Technology

Featured

Transcript