HTML5 Sectioning Elements

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. 10 / 25
    HTML5 Sectioning Elements
    
    
    
    
    11 / 25
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. 17 / 25
    
    章節
    18 / 25
    

    View Slide

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

    View Slide

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
    

    View Slide

21. 20 / 25
    HTML5 Element Flowchart
    21 / 25
    

    View Slide

22. 21 / 25
    HTML5 Outliner
    22 / 25
    

    View Slide

23. 22 / 25
    Section Root Elements
    
    
    
    23 / 25
    

    View Slide

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

    View Slide

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

    View Slide