程湘之間: 實用的 HTML5 Outliner

2012年12月22日星期六

Html5

開發 Html5 網頁時，常常沉淪在 UI 的視覺效果、功能的實作、資料庫的存取效能等看的出來的「需求」，卻忘了 Html5 的一個 Outline (大綱)特色。

大綱功能的出現，可以幫助瀏覽器快速的掌握該網頁的主要架構，有助於 SEO(搜尋引擎最佳化)，甚至讓瀏覽器快速地呈現出網頁。因此，了解自己的網頁大綱是否正常，是一個必須面對的課題。

要了解大綱，就去看一看 Html5 的 spec 吧。

有沒有實用的小功具可以幫助我們來檢查網頁的大綱呢？Google Chrome 上有個 extension:

以 yahoo 新聞首頁來 check 一下吧。好像不錯啊！

檢查我自己在開發的網站一下。

哦！不妙！快點修改吧！Untitled …代表有大綱章節(section)卻沒有章節名稱(section name)，就好像一本書的目錄( table of content)出現一堆的(未命名)一樣醜。誰也不看這樣的書吧。