摘要：元素表示主導(dǎo)鏈接的區(qū)域。已經(jīng)習(xí)慣使用或元素對鏈接進行結(jié)構(gòu)化的情況下，并沒有取代這種最佳實踐，只不過在它們外圍包上了一個。不允許將嵌套在內(nèi)。

一個網(wǎng)頁主要包括文本內(nèi)容、對其它文件的引用和標記。

HTML包含關(guān)于文檔中內(nèi)容的信息，這些信息稱作標記，用以描述內(nèi)容的含義，即語義。也就是說，HTML僅僅關(guān)心網(wǎng)頁中要展示的內(nèi)容，至于如何展示，那是CSS的事。

非空元素：開始標記（start tag，元素名稱和屬性，如果有的話放在尖括號中）、內(nèi)容和結(jié)束標記（end tag，一個斜杠后跟元素名稱放在尖括號中）。

Email Address

空元素：左尖括號、元素的名稱和任何可能有的屬性、一個可選的空格和一個可選的斜杠、右尖括號。

瀏覽器呈現(xiàn)HTML時，會把多個空格或制表符壓縮成單個空格，并把回車和換行符轉(zhuǎn)換成單個空格，或者將他們一起忽略。

HTML過去只能使用ASCII字符；Unicode大大減輕了特殊字符問題的負擔(dān)，UTF-8對頁面進行編碼，并用同樣的編碼保存HTML文件，已成為一種標準做法。

Unicode與UFT-8的區(qū)別（從起源講起，很詳細！）

文件名使用小寫字母（訪問者輸入方便），單詞之間用短橫線分割（搜索引擎更傾向于接受的方式），擴展名.html。

URL包括模式（如：http、https、ftp、mailto、file）、服務(wù)器名稱、路徑、文件名。

“http://www.site.com/tofu/index.html”

若省略index.html也可以，因為路徑中最后一個目錄中的默認文件通常為index.html。在網(wǎng)站最頂層目錄（通常稱為根目錄）中創(chuàng)建的默認頁面（index.html）是網(wǎng)站的主頁，當訪問者只輸入域名而沒有指定路徑信息（如 www.yourdomian.com）時，就會顯示這個頁面。

一般來說，對指向站內(nèi)網(wǎng)頁的鏈接使用相對URL，對指向其他網(wǎng)站的鏈接使用絕對URL。

一個空的html頁面

每個頁面標題必須是間斷的描述性的，而且是 唯一的。頁面標題會被Google等搜索引擎采用，從而能夠大致了解頁面內(nèi)容，并將頁面標題作為搜索結(jié)果中的鏈接顯示。所以要讓每個頁面的title是唯一的，從而提升搜索引擎結(jié)果排名，并讓訪問者有更好的體驗。

HTML提供了6級標題（h1 ~ h6）用于創(chuàng)建頁面信息的 層級關(guān)系，它們也構(gòu)成了頁面的大綱。瀏覽器會從h1到h6逐漸減小標題字號，不過要依據(jù)內(nèi)容所處的層級關(guān)系選擇標題級數(shù)，而不是你希望文字應(yīng)該顯示的大小。

...

    
Product User Guide
    
Setting it Up
    
Basic Features
    
Video Playback
    
Advanced Features

HTML通過h1~h6為頁面定義一個基本的大綱（雖然目前瀏覽器還不能提供顯示頁面大綱的方法）。

HTML5提供了四個分塊內(nèi)容元素：article、aside、nav和section。下面是一個等價的大綱。

...

    

        
Product User Guide
        

            
Setting it Up
        

        

            
Basic Features
            

                
Video Playback
            
        

        

            
Advanced Features
        
    

推薦使用后者。

但是，還要對代碼做一下調(diào)整。

...

    

        
Product User Guide
        

            
Setting it Up
        

        

            
Basic Features
            

                
Video Playback
            
        

        

            
Advanced Features
        
    

這樣做的原因是： 迎合當前生態(tài)系統(tǒng)。在HTML5這樣的新規(guī)范在最終確定之前，每天都在變化；而新版的的瀏覽器、屏幕閱讀器和其他輔助技術(shù)也在推出，但它們的步調(diào)并不會完全同步，這意味著屏幕閱讀和其他輔助技術(shù)還無法區(qū)分直接放在body里的h1和包含在article、aside、nav和section里的h1.因此，在生態(tài)系統(tǒng)趕上來之前，推薦最后一種做法。

    
Giraffe Escapes from Zoo
    
Animals Worldwide Rejoice

hgroup不能只包含一個標題，至少兩個。

在一個hgroup中，只有 第一個 最高級別的標題會出現(xiàn)在大綱里。

我們訪問過的大部分網(wǎng)頁都包含四個主要部件：帶導(dǎo)航的頁頭、顯示在主體內(nèi)容區(qū)域的文章、顯示次要信息的側(cè)欄以及頁腳。接下來將要講到用header、nav、article、section、aside和footer定義頁面結(jié)構(gòu)，以及用以添加額外樣式信息或?qū)崿F(xiàn)其他目的的通用容器div，除了div，這些元素都是HTML5推出后才有的。

...


    



    

        
Fraquently Asked Questions
        
    

    
    

        
What is your return policy?
        
...[答案]...
    

    

        
How do I find a location?
        
...[答案]...
    
    ...

header

header元素標記頁面中的一塊包含介紹性或?qū)Ш叫詢?nèi)容的區(qū)域。

只在必要時使用header。大多數(shù)情況下，如果只有h1~h6或hgroup，沒有其他需要與之組合的伴生內(nèi)容，就沒必要用header將它包起來。

header與h1~h6元素中的標題是不能互換的。它們都有各自的語義目的。

不能再header中嵌套footer元素或另一個header，也不能在footer或address中嵌套header。

nav

nav元素表示主導(dǎo)鏈接的區(qū)域。nav中的鏈接可以指向頁面中的內(nèi)容，也可以指向其他頁面或資源，或者兩者兼有。

鏈接列表使用ul元素，如果是面包屑鏈接，則使用ol。

已經(jīng)習(xí)慣使用ul或ol元素對鏈接進行結(jié)構(gòu)化的情況下，nav并沒有取代這種最佳實踐，只不過在它們外圍包上了一個nav。nav能幫助識別頁面的主導(dǎo)航，并允許用戶通過鍵盤直接跳至這些鏈接，提高頁面的可訪問性，提升訪問者的體驗。

不允許將nav嵌套在address中。

article、section、nav和aside是HTML5中定義的四個分塊內(nèi)容元素，使用這些元素可以增強語義，在頁面中并沒有任何樣式上的變化。

article定義：表示文檔、頁面、應(yīng)用或網(wǎng)站中一個獨立的容器，原則上是可獨立分配或可再用的，即聚合。它可以使一片論壇帖子，一篇雜志或報紙文章，一篇博客文章，一則用戶提交的評論，一個交互式的小部件或小工具，或者任何其他獨立的內(nèi)容項。

section定義：代表文檔或者應(yīng)用的一個一般的區(qū)塊。在這里，section是具有相似主題的一組內(nèi)容，通常包含一個標題。section的例子包含章節(jié)、標簽式對話框中的各種標簽頁、論文中帶編號的區(qū)塊。比如網(wǎng)站的主頁可以分成介紹、新聞條目、聯(lián)系信息等區(qū)塊。

    
The Diversity of Papua New Guinea
    
Papua New Guinea is home to more than 800 tribes and language ... 
    
    

    

        
Reader Comments
        

            
            
Great article! I"ve always been curious about papua New Gunea.
        

        

        ...
        
    

注意footer和address的使用。不能將article嵌套在address里面。

    
Barcelona"s Archite
    
...

    

        
La Sagrada Familia
        
...
    

    

        
Park Guell
        
...
    

section不是一個像div一樣的通用容器，因為section表達一定的含義，而div則沒有任何語義上的含義。

article和section元素很容易混淆，因為它們的區(qū)別有時很細微。 如果你的內(nèi)容是適合做聚合的一塊獨立的內(nèi)容或一個小組件，就使用article；否則，在大多數(shù)情況下，使用section。

如果一部分內(nèi)容與頁面主體內(nèi)容不那么相關(guān)，但可以獨立存在，可用aside元素表示。

...


 ... 

 ... 

aside元素也可以寫在article，或者在其中嵌套nav。瀏覽器在默認情況下并未對aside應(yīng)用任何特殊樣式，可以通過CSS控制其外觀顯示，大多將aside做為側(cè)欄，也可以用在頁面很多地方，包括抬升式引用、新聞?wù)旧狭谐鱿嚓P(guān)文章的鏈接框、廣告、nav元素組（如博客的友情鏈接）、Twitter源、商業(yè)站上相關(guān)產(chǎn)品列表。

HTML5不允許將aside嵌套在address內(nèi)。

footer代表嵌套在它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的頁腳。頁腳通常包含關(guān)于它所在區(qū)塊的信息，如指向相關(guān)文檔的鏈接、版權(quán)信息、作者及其他類似條目。

不允許在footer里嵌套header或另一個footer，也不允許將footer嵌套在header或address里。

 ... 
 ... 

不同于article、section、aside、nav，div是一個沒有任何語義的容器。用div可以為其添加CSS樣式或JavaScript效果。在HTML中，div是塊級無語容器，而與之對應(yīng)的是短語的無語容器span。

WAI-ARIA（Web Accessibility Initiative"s Accessible Rich Internet Applications， 無障礙網(wǎng)頁倡議之可訪問的富互聯(lián)網(wǎng)應(yīng)用，也簡稱ARIA）是一種技術(shù)規(guī)范。在HTML提供語義功能之前，它會使用屬性來填補一些語義上的空白。

地標角色（landmark role）是它眾多特性中的一種，可以幫助用戶識別區(qū)域，包括application、banner、complementary、contentInfo、form、main、navigation和search。

...



    

        ...
        
    

    
    

        

         ...
        

        

         ...
        

        ...[所需要的其他區(qū)塊]...
    
    

    
    

        

        

        ...[所需要的其他區(qū)塊]...