本節書摘來自異步社群《html5開發手冊》一書中的第1章，第1.11節,作者： 【美】chuck hudson , 【英】tom leadbetter 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
圖1.13和代碼1.13所示為如何使用所有的html5新元素來建立一個新聞頁面的布局。示例中使用了一些基本的css來定義元素的位置。閱讀完後面的章節，我們能使這個頁面更漂亮。
代碼1.13 建立一個新聞首頁
https://yqfile.alicdn.com/ab47bea9d3547ee7e9695509c72dbbfa5cbd3e55.png" >
在編輯好一個基本的布局和代碼後，讓我們檢查一下文檔大綱。前面的代碼會産生如下的大綱：
1．loads of news
a．untitled nav
2．headline article
a．this is our most important article
3．sports news
a．sports headline 1
b．sports headline 2
c．sports headline 3
4．entertainment news
a．entertainment headline 1
b．entertainment headline 2
c．entertainment headline 3
5．nerdy news
a．nerdy headline 1
b．nerdy headline 2
c．nerdy headline 3
6．untitled aside
這看上去很優美。footer元素與section、article、nav和aside不同，不是分欄内容（sectioning content），是以不會顯示在大綱中。nav和aside中沒有标題，這也不要緊。當然也可以給aside一個标題，不過嵌入的廣告可不會保證有标題。