201206170206HTML5 sectioning elements

我發現多數人學 HTML5 注意的是多了哪些新 JavaScript / DOM API 、 新 HTML 屬性 、新 HTML 標籤,而沒有注意到 <article> 、 <section> 、 <aside> 、 <nav> 、 <figure> 這幾個被稱為 sectioning elements 的新標籤構成的 Outline 系統,使用方式與 HTML 4.01 、 XHTML 的傳統標籤並不相同。如果以 HTML 4.01 、 XHTML 的思維來使用這幾個 HTML5 新標籤,寫出來的網頁恐怕在語意上會大錯特錯。遺憾的是講語意錯誤大家都不在意,要講語意錯誤對 SEO 有影響大家才在意 :( 。

但這幾個 sectioning elements 新標籤 Outline 系統的使用方式變革,卻也是我最喜歡 HTML5 的部分。因為它解決了 HTML 4.01 、 XHTML 中 heading被 heading 內容對不起來的問題。

台灣介紹這方面的文章只找到一篇 XDite 寫的,但他是從犯的錯誤往回看。即使如此,依然值得一看。

如何設計出正確語意的 HTML5

完整的介紹,我多半是從國外的網站 HTML5 Doctor 看來。如果可以的話,甚至是建議整個網站都看一遍。

辦不到,至少下面幾篇看一看吧:

HTML5 Doctor 也畫了張 HTML5 Element Flowchart 供大家決定該使用哪個 HTML5 標籤,這張圖我個人用得非常兇。

由於 HTML5 Doctor 採用 Creative Commons Attribution-Non-Commercial 2.0 ,所以我在此放置縮圖,但建議大家還是點回去看大圖爽快些。

也請務必使用網站 HTML 5 OutlinerChrome Extension HTML5 Outliner 看看你寫的 HTML5 網頁 Outline 出來和你想的一不一樣,及早修正。

後記 對岸的這篇不賴!HTML大綱算法對結構的影響
回應
Google 站內搜尋
BloggerAds
累積 | 今日
loading......
    沒有新回應!





Powered by Xuite