First class heading
content here
Second class heading
content here
如何設計出正確語意的 HTML5
最近在把玩由 @evenwu 介紹的 middleman，middleman 是一個方便設計師設計 Ruby / Rails Web app theme 的工具，支援了 Bundler、Rack。
anyway 這不是重點，重點是 middleman 也提供了 html5 layout 作為 default。而這個 default layout 是錯的。
最近剛好翻修過一輪 Techbang 的 HTML，大幅修正了原先錯誤的 HTML5 語意。看到寫錯的 HTML 都很敏感。覺得忙完（前陣子公司 event、自己搬家、參加 Rubyconf ）後應該要來好好的整理一篇，第一個上班日，就看到錯的 default 值 orz。
常見錯誤
錯誤 1：把 section 當成普通容器元素
與其將題目定為「如何設計出正確語意的 HTML5」，經過接近兩週的翻修 HTML 工作與研讀 HTML5 Spec 之後，我想本文主旨更貼近的是「如何避免設計錯誤語意的 HTML5」。
middleman 產生的 layout.html.erb (最外圍的容器） 範例是
<%= yield %>
這也是最 common 的 mistake。
請注意： "section" 並不是容器。
更明白的說：
- section 是「一段」有意義的內容。
- 如果你必須要使用 section 的話，它必須要有 heading
- 如果你需要容器的話，請回去使用 div
錯誤 2：把 header 當成容器元素
header 可以使用在多處，標示為一段文件、一篇文章或者是一頁文件的標題。但是常見的一個設計錯誤是將 header 當做一段 header 「容器」。舉例來說：
# A LOT OF CODE HERE first heading
bar
second heading
header
- 並不是一段 sectioning content
- header 並不會 follow outline algorithm
如果你需要一個 header 「容器」，請使用 div。維持 header 內的單純。
錯誤 3: 將看得到的「列表」元素都包上 nav
nav 這個元素是「導航」的意思。表示這一段文件、一篇文章、一頁文件的導航 Link。也就是
- 該站導覽 bar
- 次專區導覽 bar
- 文件導覽 bar
都適合使用用 nav 標記
常見錯誤的設計是將看的見的 ul li 外面都包上一層 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.
Don’t use
所以以下這些元素是不適合用 nav 標記的：
- 分頁標記
- social link
- TAG 與 Categories
當然，我見過最離譜的設計是這樣的：
# A LOT OF CODE HERE
這一段 code 其實需要用 div 全部重寫。
常見誤區
另外則是一些模糊誤區。
誤區 1 ：以為只有 sidebar 才適用 aside
aside 的定義是：
a section of a page that consists of content that is tangentially related—but separate—to the surrounding content. In print this would be a sidebar, pullquote or footnote.
也就是跟主文沒那麼相關的都可以扔 aside 啦。
誤區 2 : 搞不清楚何時該使用 article / section / div ？
以下是它們的定義
-
article : An article is an independent, stand-alone piece of discrete content.
-
section : on the other hand, isn’t “a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable”. It’s either a way of sectioning a page into different subject areas, or sectioning an article into … well, sections.
-
div : is only a block of content
白話的解釋，如果你不知道該怎麼定義的話：可以先都使用 article 去定義一段文本。如果它是一段「相關文本」，可以使用 section。因為 article 的語意比較多樣，而 section 則窄的多。
而如果這段內容它「沒有任何語意上」的意義，再使用 div。
誤區 3 : 哪一種元素要加 heading？不加可以嗎？
well，礙於 web design 元素排列的關係，其實不是每次你想加 heading 都可以加上去，有時候一加上去排版就爆炸了，還得另外寫 css 隱藏。即便這樣，但是有一些元素是強烈建議一定要加 header 或 hx 的（強烈到 **must** )。比如：
- article
- section
至於
- nav
- aside
沒有 heading 倒沒有什麼太大的關係。
使用語意標記撰寫 HTML 有什麼好處？
在傳統的 HTML4 上，能夠拿來強調語意的只有 strong em hx p 等等…
但在設計上這是遠不夠用的。比如說實作一個 CMS 好了。這是我們常見的 HTML 設計手法。
SITENAME
POST TITLE
# EDITOR's content here