HTML5 語意標籤理論與實戰

HTML5 / Node.js 聯合小聚

September 17, 2011

http://bit.ly/xdite-talk-html5

about.me/xdite

鄭伊廷 ( xdite@about.me )

Lead Developer / Manager of Techbang

專長

Rapid development ( most in Rails )
Technical training ( most in Ruby / Rails )
Search Engine Optimization ( SEO )
Website Scaling
Website Marketing

T 客邦

3C / 攝影 / 電玩資訊入口網站
Taiwan Alexa 百大網站
powered by Ruby on Rails

其實我不知道為什麼要換

有人趁我不在家時換掉了

而且他寫的還是爛的 HTML5

HTML5 語義標籤血淚談

總之我得收爛攤子

不會提及的主題

HTML5 basis
ARIA

Agenda

研究 HTML5 語意標籤的動機
HTML5 翻修實錄
HTML5 誤區
使用語意標籤的好處
開發注意事項 / 工具介紹

研究 HTML5 語意的動機

其實我是被逼的

SEO 是工作的一部分

搜尋引擎佔了網站的流量不小比例
Yahoo 來的流量逐漸偏低
HTML4 時代一直很威

What happened?

開始找問題…

出了什麼事？

Google 的結果很正常，應該是 Yahoo 在發春…

問題還是一樣要解決

3 個月以後終於有空念 HTML5 spec

就跟你說我是被逼的…

O 你老師 OOO

讀了 spec 3 小時以後發現這份 HTML 全部都是錯的

Yahoo 我錯怪你了，原來你照 spec 來..

Common HTML5 mistakes

#1 把 section 當成普通容器元素

http://html5doctor.com/avoiding-common-html5-mistakes/

Our HTML (當時）


    <header id="header">
      <div class="group">
        <!-- logo, ads, search, user_nav -->
      </div>
      <section>
        <!-- web sites link-->
      </section>
      <section>
        <!-- main_nav-->
      </section>
    </header>

    <section id="content">
        # ……
    </section>

我流淚了…

每一份文件的重點（第一段）都是：T 集團網路

<header>
  <div> <!-- logo, ads, search, user_nav --> </div>
  <section>
    <header>T客邦集團網路</header>
    <nav class="network">
      <a href="http://t17.techbang.com.tw">T17</a>
      <a href="http://www.techbang.com.tw">Techbang</a>
      <a href="http://digiphoto.techbang.com.tw">Digiphoto</a>
      <a href="http://game.techbang.com.tw">打電動</a>
      <a href="http://bbking.techbang.com.tw">比比王</a>
    </nav>
  </section>
  <section> <!-- main_nav--> </section>
</header>

不意外

Yahoo 才是對的 T_T

Section

The section element represents a generic document or application section …The section element is not a generic container element . When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

http://html5doctor.com/the-section-element/

Abusing <section>

Section 不是容器

Rules of using section

不要拿 section 來 styling，那是 div 的事。
如果 article, aside or nav 更適合的話，就不要使用 section。
如果這段文字最開頭之前沒有 natually heading，那麼也不要使用 section。

Common HTML5 mistakes

#2 把 header 當成普通容器元素

http://html5doctor.com/avoiding-common-html5-mistakes/

Our HTML (當時）

    <header>
      <div class="group">
        <!-- logo, ads, search, user_nav -->
      </div>
      <section>
        <!-- web sites link-->
      </section>
      <section>
        <!-- main_nav-->
      </section>
    </header>

Header

header 可以使用在多處，標示為一段文件、一篇文章或者是一頁文件的標題。
header 同樣可以拿來包裹 TOC / 搜尋表格 / LOGO …
但 header is not a sectioning content , it doesn't introduce a new section.

http://www.w3.org/TR/html5/sections.html#the-header-element

Rules of using header

通常包含 <h1–h6 element or an hgroup element ，但非「必須」。
可拿來包裝 TOC / 搜尋表格 / LOGO
複雜的 DOM 請使用 div

Common HTML5 mistakes

#3 將看得到的「列表」元素都包上 nav

http://html5doctor.com/avoiding-common-html5-mistakes/

Our HTML（當時）

   <header>
      <div class="group">
        <!-- logo, ads, search, user_nav -->
        <nav id="user-navigation">
        <ul>
          <li> 登入</li>
          <li> 註冊 </li>
          <li> 關於本站 </li>
        </ul>
       </nav>
      </div>
      <section><!-- web sites link--> </section>
      <section> <!-- main_nav--> </section>
    </header>

Nav

a section of navigation links, either to other pages (site navigation) or to sections on the same page (eg a table of contents for long articles). This is for primary navigation blocks, not just for any group of links.

http://html5doctor.com/nav-element/

適合使用 Nav 的地方

該站導覽 bar
次專區導覽 bar
文件導覽 bar

不適合使用 Nav 的地方

分頁標記
social link
TAG 與 Categories

加起來會變成？

很恐怖不要看…

知道為什麼我想殺人了吧...

重要的內容在第 4 層

Refacor

殺了我比較快…

HTML 無法寫 Test
我們必須 support IE 6,7,8,9
四個站的 DOM 不一致

Refactor Steps

工作只好吞下去。但苦主還是我。

統一四站的 DOM / CSS - 2 weeks (by 澤清)
unHTML5 - 2 weeks ( by xdite )
加上正確的 HTML5 語意 - 2 day ( by xdite )

統一四站的 DOM / CSS

區塊整理，大區塊規則必須一致

Rails partial
SCSS partial

unHTML5

當然沒那麼簡單…

使用 <div class="section"> 取代 <section>
使用 <div class="header"> 取代 <header>
使用 <div class="nav"> 取代 <nav>
使用 <div class="header"> 取代 <header>
使用 <div class="article"> 取代 <article>

unHTML5 中遇到的問題

display:block; 的效果消失
styling 原先是被下在語意標籤上
有時候不只需要改一層 DOM
調換語意會大跑版
正確的語意很醜…

加回正確的 HTML5 語意

文章 / 文章列表加回 <article>
文章標題必加 <header>
導覽列表加回 <nav>
側欄區塊一律使用 <aside>
次要地位的文章區塊，使用 <aside>

Final Results （調整完的 T17 ）

似乎是地雷為什麼還要衝？

HTML5 超多眉角

HTML4 不敷使用

p
strong
em
h1-h6

CMS 常見的 HTML 佈局

<div class="header">
  <h1> SITENAME </h1>
</div>
<div class="wrapper">
  <div class="article-header">
    <h2> POST TITLE </h2>
  </div>

  <div class="social-link">
    SOCIAL LINKS HERE
  </div>

  <div class="article-content">
    # EDITOR's content here
    <h1> First class heading </h1>
    <p> content here </p>
    <h2> Second class heading </h2>
    <p> content here </p>
  </div>
</div>

CMS 常見的 HTML 佈局 (續)

<div class="sidebar">
  <div class="section">
    <h2> Widget Title </h2>
    <div class="widget-content">
      WIDGET CONTENT HERE
    </div>
  </div>
</div>

問題點：

哪一段才是真正的文本？ wrapper / social-link / sidebar
哪一個才是真正的標題？ 2 個 h1 / 3 個 h2

Search Engine：哩供蝦？

主動幫搜尋引擎畫重點

What HTML5 Semantic Tag do ?

article
section
aside
nav
header / footer

改成這樣如何？

# 省略...
<div class="wrapper">
  <article>
  <div class="article-header">
    <header><h2> POST TITLE </h2></header>
  </div>
  <div class="social-link">
    SOCIAL LINKS HERE
  </div>
  <div class="article-content">
    <section>
    # EDITOR's content here
    <h1> First class heading </h1>
    <p> content here </p>
    <h2> Second class heading </h2>
    <p> content here </p>
    </section>
  </div>
  </article>
</div>

改成這樣如何？ (續)

<div class="sidebar">
  <aside class="section">
    <h2> Widget Title </h2>
    <div class="widget-content">
      WIDGET CONTENT HERE
    </div>
  </aside>
</div>

重點一清二楚！

如何開始著手設計？

新手通常不知道如何挑選適當的 TAG

Design Steps

請先設計普通的 Layout， NO semantic tags
為這份 Layout 畫重點

警告：千萬不能做的事

在語意 TAG 上，使用任何的 style
一邊佈局一邊上語意

EPIC FAIL : 邊寫筆記邊畫重點

撰寫語意 HTML5 需要的工具

工欲善其事，必先利其器

基本必備工具

因為 IE 6,7,8 不支援

html5shiv
HTML5 Reset Stylesheet

http://code.google.com/p/html5shiv/
http://html5doctor.com/html-5-reset-stylesheet/

建議使用工具

Chrome HTML5 Outliner

畫重點的好幫手

http://html5doctor.com/happy-1st-birthday-us/

Reference

http://blog.xdite.net/?p=3071

HTML5 語意標籤理論與實戰

http://bit.ly/xdite-talk-html5

about.me/xdite

專長

T 客邦

實戰 HTML5 ?

技癢?

Better SEO ?

都不是

其實我不知道為什麼要換

HTML5 語義標籤血淚談

不會提及的主題

Agenda

研究 HTML5 語意的動機

SEO 是工作的一部分

What happened?

囧!

囧!

出了什麼事？

問題還是一樣要解決

O 你老師 OOO

Common HTML5 mistakes

Our HTML (當時）

我流淚了…

不意外

Section

Abusing <section>

Rules of using section

Common HTML5 mistakes

Our HTML (當時）

Header

Rules of using header

Common HTML5 mistakes

Our HTML（當時）

Nav

適合使用 Nav 的地方

不適合使用 Nav 的地方

加起來會變成？

知道為什麼我想殺人了吧...

Refacor

Refactor Steps

統一四站的 DOM / CSS

unHTML5

unHTML5 中遇到的問題

加回正確的 HTML5 語意

Final Results （ 調整完的 T17 ）

似乎是地雷為什麼還要衝？

HTML4 不敷使用

CMS 常見的 HTML 佈局

CMS 常見的 HTML 佈局 (續)

問題點：

Search Engine：哩供蝦？

主動幫搜尋引擎畫 重點

改成這樣如何？

改成這樣如何？ (續)

如何開始著手設計？

Design Steps

警告：千萬不能做的事

EPIC FAIL : 邊寫筆記邊畫重點

撰寫語意 HTML5 需要的工具

基本必備工具

建議使用工具

畫重點的好幫手

Reference

廣告

Techbang are hiring developers.

I am selling books.

Thanks for listening

Final Results （調整完的 T17 ）

主動幫搜尋引擎畫重點