HTML5 Sectioning Elements

HTML5 Sectioning Elements

7067c01e5e98f8b8211343054a908076?s=128

Ping-Yen Tsai

May 14, 2014
Tweet

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