HTML5大綱算法對(duì)結(jié)構(gòu)的影響 |
發(fā)布時(shí)間: 2012/8/18 16:59:43 |
HTML5已經(jīng)出來好長(zhǎng)時(shí)間了,越來越多人希望并且開始把HTML5應(yīng)用到平時(shí)的工作、個(gè)站中。大家對(duì)section、article、aside、nav等新標(biāo)簽的使用也越來越上手,也許是自我感覺良好的上手。不從多個(gè)方面去認(rèn)識(shí)理解這些標(biāo)簽,可能反而讓自己落入了更混亂的境地。HTML的大綱算法(outlining algorithm)就是一個(gè)很重要的切入點(diǎn)。 先看兩個(gè)大綱: 這兩個(gè)都是我早期的作品了。當(dāng)時(shí)還覺得自己的結(jié)構(gòu)寫的不錯(cuò),特別是第二個(gè),還用上了HTML5標(biāo)簽,以為自己就踏進(jìn)這個(gè)新世界了?催^HTML大綱算法之后,檢測(cè)了一下這些頁面,真的是慘不忍睹。第一個(gè)各種混亂標(biāo)題不說,“主創(chuàng)陣容”居然從屬于“用戶評(píng)論”?第二個(gè)也不好發(fā)言了,那么多未命名的是什么東西?不過總是要踩在傷痛的歷史上才能往前進(jìn)。 再來看幾個(gè)其他人重構(gòu)的頁面大綱: 想象你是一個(gè)有點(diǎn)視力障礙的用戶,需要依靠屏幕閱讀器來瀏覽這些網(wǎng)頁,閱讀器會(huì)按照層級(jí)來給你解讀這個(gè)網(wǎng)頁,你覺得上面那個(gè)網(wǎng)頁更容易讓你獲得所需要的資訊呢?也許對(duì)比完大家更想知道大綱算法到底是個(gè)怎么樣的東西了吧? 什么是HTML大綱算法? 大綱算法允許用戶代理(user agent)從一個(gè)web頁面生成一個(gè)信息結(jié)構(gòu)目錄,讓用戶對(duì)頁面有一個(gè)快速的概覽。類似書籍、PDF、幫助文檔等,都有一個(gè)清晰的目錄結(jié)構(gòu),用戶能方便的定位所需內(nèi)容。一個(gè)良好結(jié)構(gòu)的大綱,不僅是對(duì)于搜索引擎的優(yōu)化,更是為借助于屏幕閱讀器瀏覽網(wǎng)頁的盲人(或弱視力)用戶提供了巨大的幫助。 幫助文檔的目錄結(jié)構(gòu): 每個(gè)頁面都有大綱,先從一個(gè)簡(jiǎn)單的例子來了解web頁面大綱吧。假設(shè)要做一個(gè)電影介紹頁面,主題是8月電影推介,頁面結(jié)構(gòu)也許如下:
HTML4或者之前,我們都是采用hn(h1~h6)來生成大綱的。HTML5引入了section、article、aside、nav等新的節(jié)點(diǎn)元素(sectioning content),添加了一些新的規(guī)則,后面會(huì)詳細(xì)闡述。 本文出自:億恩科技【mszdt.com】 服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)!虛擬主機(jī)域名注冊(cè)頂級(jí)提供商!15年品質(zhì)保障!--億恩科技[ENKJ.COM] |