HTML5大綱算法對結(jié)構(gòu)的影響

HTML5已經(jīng)出來好長時間了，越來越多人希望并且開始把HTML5應(yīng)用到平時的工作、個站中。大家對section、article、aside、nav等新標簽的使用也越來越上手，也許是自我感覺良好的上手。不從多個方面去認識理解這些標簽，可能反而讓自己落入了更混亂的境地。HTML的大綱算法(outlining algorithm)就是一個很重要的切入點。

先看兩個大綱：

這兩個都是我早期的作品了。當時還覺得自己的結(jié)構(gòu)寫的不錯，特別是第二個，還用上了HTML5標簽，以為自己就踏進這個新世界了。看過HTML大綱算法之后，檢測了一下這些頁面，真的是慘不忍睹。第一個各種混亂標題不說，“主創(chuàng)陣容”居然從屬于“用戶評論”？第二個也不好發(fā)言了，那么多未命名的是什么東西？不過總是要踩在傷痛的歷史上才能往前進。

再來看幾個其他人重構(gòu)的頁面大綱：

想象你是一個有點視力障礙的用戶，需要依靠屏幕閱讀器來瀏覽這些網(wǎng)頁，閱讀器會按照層級來給你解讀這個網(wǎng)頁，你覺得上面那個網(wǎng)頁更容易讓你獲得所需要的資訊呢？也許對比完大家更想知道大綱算法到底是個怎么樣的東西了吧？

什么是HTML大綱算法？

大綱算法允許用戶代理(user agent)從一個web頁面生成一個信息結(jié)構(gòu)目錄，讓用戶對頁面有一個快速的概覽。類似書籍、PDF、幫助文檔等，都有一個清晰的目錄結(jié)構(gòu)，用戶能方便的定位所需內(nèi)容。一個良好結(jié)構(gòu)的大綱，不僅是對于搜索引擎的優(yōu)化，更是為借助于屏幕閱讀器瀏覽網(wǎng)頁的盲人（或弱視力）用戶提供了巨大的幫助。

幫助文檔的目錄結(jié)構(gòu)：

每個頁面都有大綱，先從一個簡單的例子來了解web頁面大綱吧。假設(shè)要做一個電影介紹頁面，主題是8月電影推介，頁面結(jié)構(gòu)也許如下：

1.8月電影推介  
  1.國內(nèi)電影  
    1.《四大名捕》  
    2.《搜索》  
  2.國外電影  
    1.《冰川時代4》  
    2.《在劫難逃》 

HTML4或者之前，我們都是采用hn（h1~h6）來生成大綱的。HTML5引入了section、article、aside、nav等新的節(jié)點元素(sectioning content)，添加了一些新的規(guī)則，后面會詳細闡述。

服務(wù)器租用/服務(wù)器托管中國五強！虛擬主機域名注冊頂級提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]