HTML5 Sectioning Elements

7067c01e5e98f8b8211343054a908076?s=47 Ping-Yen Tsai
May 14, 2014
Technology
0
30

HTML5 Sectioning Elements

7067c01e5e98f8b8211343054a908076?s=128

Ping-Yen Tsai

May 14, 2014
Tweet

More Decks by Ping-Yen Tsai

See All by Ping-Yen Tsai
7067c01e5e98f8b8211343054a908076?s=48 pingyen
0
28
7067c01e5e98f8b8211343054a908076?s=48 pingyen
2
330
7067c01e5e98f8b8211343054a908076?s=48 pingyen
0
56
7067c01e5e98f8b8211343054a908076?s=48 pingyen
1
55
7067c01e5e98f8b8211343054a908076?s=48 pingyen
0
40
7067c01e5e98f8b8211343054a908076?s=48 pingyen
0
210
7067c01e5e98f8b8211343054a908076?s=48 pingyen
0
41
7067c01e5e98f8b8211343054a908076?s=48 pingyen
0
53
7067c01e5e98f8b8211343054a908076?s=48 pingyen
0
40

Other Decks in Technology

See All in Technology
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
120
1f745ff900e1be51aedae18cae76593c?s=48 kurochan
0
1.6k
Ea9506ab742ba01d1bea53af6f5649b7?s=48 tsuemura
24
13k
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
0
270
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
190
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
130
Af61fe2beec7f195d7418e0a474a4dfc?s=48 kfujieda
3
1.1k
5bc984d78def65048378c439d77c379f?s=48 tomoyamachi
1
170
835671ae91e49b2637313b91dacda1db?s=48 tdys13
1
1.1k
0251532f4fb413ea1a026efe6eb16b87?s=48 stajima
0
220
Eea9a05e6e222a3d50c73f54a49fadf4?s=48 rtechkouhou
0
490
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
220

Featured

See All Featured
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
69
1.2k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.4k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.7k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
51
1.8k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
4
57
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
240
20k
24fc194843a71f10949be18d5a692682?s=48 gr2m
82
11k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
104
10k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
65
250k

Transcript

  1. HTML5 Sectioning Elements Ping-Yen Tsai 1 / 25

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

    2 / 25 1 / 25

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

    / 25

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

  5. 4 / 25 台灣某 BSP 2011/12 與 2012/2 相比 從

    Yahoo! 奇摩搜尋引擎來的流量 -60% 一個月 PV 少了 600 萬 5 / 25

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

    6 / 25

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

    <heading> 的範圍 2. <h1> <h2> <h3> <h4> <h5> <h6> 沒有 <h7> 7 / 25

  8. 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

  9. 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

  10. 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

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

    11 / 25

  12. 11 / 25 注意 <header> <footer> <main> 不是 Sectioning Elements

    它們只是比較有語義的 DIV 12 / 25

  13. 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

  14. 13 / 25 <main> 一個網頁只能出現一次 指明 <body> 裡的 <main> 14

    / 25

  15. 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

  16. 15 / 25 <aside> 側欄 或 可與主內容分開的內容 16 / 25

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

    / 25

  18. 17 / 25 <section> 章節 18 / 25

  19. 18 / 25 <nav> <aside> 裡面可以沒有 heading <article> <section> 裡面一定要有

    19 / 25

  20. 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

  21. 20 / 25 HTML5 Element Flowchart 21 / 25

  22. 21 / 25 HTML5 Outliner 22 / 25

  23. 22 / 25 Section Root Elements <body> <figure> <blockquote> 23

    / 25

  24. 23 / 25 讓 IE 支援 HTML5 新標籤 html5shiv.js 要在

    HTML5 新標籤出現前執行 document.createElement('article'); 24 / 25

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

    抓網頁 Outline 25 / 25