[[91338]]

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ī)則，后面會詳細闡述。

#p#

hn生成的大綱

也許HTML4的結(jié)構(gòu)會這樣寫：

<div> 
  <h1>8月電影推介</h1> 
  <h2>國內(nèi)電影</h2> 
  <h3>《四大名捕》</h3> 
  <p>四大名捕講的是..</p> 
  <h3>《搜索》</h3> 
  <p>搜索講的是..</p> 
  <h2>國外電影</h2> 
  <h3>《冰川時代4》</h3> 
  <p>冰川時代4講的是..</p> 
  <h3>《在劫難逃》</h3> 
  <p>在劫難逃講的是..</p> 
  <p>以上內(nèi)容由迅雷看看提供</p> 
<div> 

可以看出，網(wǎng)頁大綱由標題的層級來生成。

如果想要查看這段代碼的大綱，可以試試Geoffrey Sneddon做的大綱工具Outliner（強烈推薦），上傳文件和輸入片段代碼都可以。如果想要查看在線網(wǎng)頁的大綱，可以給瀏覽器安裝插件：chrome：HTML5 Outliner（推薦）/ Web Devoloper，firefox：Web Devoloper；opera：HTML5 Outliner。（HTML5 Outliner里中文會顯示亂碼，建議換成英文測試。瀏覽器插件可以顯示中文）

每個標題都會生成一個隱性節(jié)點(implicit section)，緊隨其后的相對層級低的標題會成為它的子節(jié)點，層級相同或者更高的標題則會關(guān)閉這個節(jié)點并生成新的節(jié)點?？梢詼y試一下下面的代碼：

<h3>《四大名捕》</h3> 
<p>四大名捕講的是..</p> 
<h3>《搜索》</h3> 
<p>搜索講的是..</p> 

或者：

<h3>《搜索》</h3> 
<p>搜索講的是..</p> 
<h2>國外電影</h2> 

節(jié)點元素生成的大綱

也許HTML5的結(jié)構(gòu)會這樣寫：

<div> 
  <h6>8月電影推介</h6> 
  <section> 
    <h1>國內(nèi)電影</h1> 
    <article> 
      <h1>《四大名捕》</h1> 
      <p>四大名捕講的是..</p> 
    </article> 
    <article> 
      <h3>《搜索》</h3> 
      <p>搜索講的是..</p> 
    </article> 
  </section> 
  <section> 
    <h5>國外電影</h5> 
    <article> 
      <h6>《冰川時代4》</h6> 
      <p>冰川時代4講的是..</p> 
    </article> 
    <article> 
      <h1>《在劫難逃》</h1> 
      <p>在劫難逃講的是..</p> 
    </article> 
  </section> 
 
  <p>以上內(nèi)容由迅雷看看提供</p> 
<div> 

（可以先注意一下上面這段代碼的各個hn）把代碼復(fù)制到Outliner工具去查看，很驚訝的發(fā)現(xiàn)，生成的大綱跟層級寫的很漂亮的HTML4一樣。為什么hn的層級在這里沒有表現(xiàn)出來？

原因是此時大綱是由節(jié)點元素生成的，而非標題元素。HTML5的新標簽section、article、aside、nav會生成顯性節(jié)點(explicit sections)，每個顯性節(jié)點內(nèi)部又有它自己的標題結(jié)構(gòu)（當然也符合HTML4、HTML5大綱算法）。這也就是為什么HTML5允許多個h1存在的原因，不過，在全部瀏覽器、屏幕閱讀器都完美支持HTML5之前，建議還是需要同時考慮標題結(jié)構(gòu)，優(yōu)雅降級。所以上面的結(jié)構(gòu)可以改成這樣：

<div> 
  <h1>8月電影推介</h1> 
  <section> 
    <h2>國內(nèi)電影</h2> 
    <article> 
      <h3>《四大名捕》</h3> 
      <p>四大名捕講的是..</p> 
    </article> 
    <article> 
      <h3>《搜索》</h3> 
      <p>搜索講的是..</p> 
    </article> 
  </section> 
  <section> 
    <h2>國外電影</h2> 
    <article> 
      <h3>《冰川時代4》</h3> 
      <p>冰川時代4講的是..</p> 
    </article> 
    <article> 
      <h3>《在劫難逃》</h3> 
      <p>在劫難逃講的是..</p> 
    </article> 
  </section> 
  <p>以上內(nèi)容由迅雷看看提供</p> 
<div> 

這里有另外一個問題值得注意，就是“以上內(nèi)容由迅雷看看提供”這段話指的是上面的哪部分內(nèi)容？在HTML4結(jié)構(gòu)里，這段話是從屬于隱性節(jié)點“《在劫難逃》”的，但明顯不對。HTML5大綱算法就很好地解決了這個問題。

hn和節(jié)點元素同時生成大綱

如果頁面里既有隱性節(jié)點（h1~h6）又有顯性節(jié)點（section等），大綱又會如何生成呢？只要記住一點：顯性節(jié)點能包含隱性節(jié)點，反之則不行。

<h1>8月電影推介</h1> 
<section> 
  <h2>國內(nèi)電影</h2> 
  <h3>《四大名捕》</h3> 
  <p>四大名捕講的是..</p> 
  <h3>《搜索》</h3> 
  <p>搜索講的是..</p> 
</section> 

（代碼1）

這段代碼的大綱會是： 

1.8月電影推介  
  1.國內(nèi)電影  
    1.《四大名捕》  
    2.《搜索》 

<h1>8月電影推介</h1> 
<h2>國內(nèi)電影</h2> 
<article> 
  <h3>《四大名捕》</h3> 
  <p>四大名捕講的是..</p> 
</article> 
<article> 
  <h3>《搜索》</h3> 
  <p>搜索講的是..</p> 
</article> 

然而這段代碼的大綱會是：

1.8月電影推介  
  1.國內(nèi)電影  
  2.《四大名捕》  
  3.《搜索》  

由標題元素生成的隱性節(jié)點遇上由節(jié)點元素生成的顯性節(jié)點就會關(guān)閉并生成下一個同級節(jié)點。

未命名節(jié)點(untitled sections)

HTML5新節(jié)點元素除了section、article還有aside、nav，我們也來使用一下。

<nav> 
  <ul> 
    <li><a href="">首頁</a></li> 
    <li><a href="">專題</a></li> 
    <li><a href="">關(guān)于</a></li> 
  </ul> 
</nav> 
<h1>8月電影推介</h1> 
<section> 
  <h2>國內(nèi)電影</h2> 
</section> 
<section> 
  <h2>國外電影</h2> 
</section> 

復(fù)制到outliner會發(fā)現(xiàn)， nav標簽會產(chǎn)生一個untitled section，因為nav里并沒有給予任何標題元素。這不是錯誤也不會被認為是不好的HTML5結(jié)構(gòu)。但是section、article還是建議給予適當?shù)臉祟}。如果不確定可以給予什么標題，也許使用div更適合，不要忘了我們還有div啊。

根節(jié)點

前面提到一個重要的原則：顯性節(jié)點能包含隱性節(jié)點，反之則不行。也許你會注意代碼1生成的大綱：

1.8月電影推介  
  1.國內(nèi)電影  
    1.《四大名捕》  
    2.《搜索》  

標題元素h1（“8月電影推介”）下緊跟著的節(jié)點元素section（“國內(nèi)電影”），變成了它的一個子節(jié)點。隱性節(jié)點不是不能包含顯性節(jié)點么？這時候就需要認識一下根節(jié)點了。

根節(jié)點可以生成自己的大綱，它的標題和節(jié)點對祖先的大綱沒有任何影響（而且不會出現(xiàn)在祖先大綱里）。目前有六個根節(jié)點：

1.body、2.blockquote、3.details、4.fieldset、5.figure、6.td

可以測試一下：

<h1>我是老大 I'm the big brother</h1> 
<blockquote> 
  <section> 
    <h1>我是blockquote里的老大，待會你看不到我了 I'm the big brother in blockquote,you'll not find me in the outliner</h1> 
  </section> 
</blockquote> 
<h2>我是老二 I'm the younger</h2> 

定義文檔里說明了：節(jié)點元素是離它最近的祖先根節(jié)點或節(jié)點元素的子節(jié)點。代碼1里的標題元素h1（“8月電影推介”）是body的標題，節(jié)點元素section（“國內(nèi)電影”）是body的子節(jié)點。

還有一個很重要的：文檔的標題是文檔中第一個且非節(jié)點元素里的標題元素。測試一下下面的代碼就很明了了：

<section> 
  <h1>我很想成為文檔的標題可惜不能 I want to be the title but I couldn't</h1> 
</section> 
<h6>雖然我層級最小可是我是第一個出現(xiàn)的 I'm h6 but I come first</h6> 
<h1>最大也沒用順序我還是在老6下面 I'm h1 but I come after h6</h1> 

過程中我還遇到過另一個讓我迷惑的：

<section> 
  <h1>我很想成為文檔的標題可惜不能 I want to be the title but I couldn't</h1> 
</section> 
<section> 
  <h2>我也很想成為文檔的標題可惜不能 Me either:(</h2> 
</section> 
<footer> 
  <h3>我是footer可是為什么我成為了文檔標題啊 I'm footer but why I become the title??</h3> 
</footer> 

原因很簡單，header和footer不是節(jié)點元素。

hgroup

hgroup很好理解也很好用，它的作用就是幫你添加副標題而不影響文檔大綱，大綱中只會出現(xiàn)層級最高的標題，無論出現(xiàn)順序。

<hgroup> 
  <h3>我是副標題，我很重要但我不會出現(xiàn)在大綱中 I'm your loved second title,I'm useful and I won't appear in the outliner</h3> 
  <h2>我是大標題，我是故意跑到下面來的 I'm the highest level of hn in the group,no matter where I am,I will be part of ouliner</h2> 
</hgroup> 

總結(jié)

到寫完這篇文章為止，好像還沒有哪個瀏覽器是完美支持HTML5大綱算法的。但這不影響我們對HTML5大綱算法的學(xué)習(xí)，就像我們現(xiàn)在在努力使用HTML5+CSS3一樣。理解了HTML5大綱算法，不僅對于新標簽的使用有更進一步的認識，而且對于最根本的頁面結(jié)構(gòu)有更優(yōu)化的理解，就算只是標題元素生成的大綱，也能擁有完美的層級結(jié)構(gòu)，這也是語義化的一個標志。

特別感謝一下大安仔，是他提醒我要注意這個問題的。

參考學(xué)習(xí)文章：

http://www.osmn00.com/rebuild/223.html

http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/

http://html5doctor.com/outlines/

https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document

原文鏈接：http://cued.xunlei.com/log047

【編輯推薦】

1. Go語言和HTML5構(gòu)建一個Web聊天室
2. 兄弟割席：HTML5標準制定組織分裂
3. 百行HTML 5代碼實現(xiàn)四種雙人對弈游戲
4. HTML 5帶來全新網(wǎng)絡(luò)格局
5. Jscex和HTML 5制作的抽獎小程序