本節書摘來自異步社群《html5與css3實戰指南》一書中的第2章，第2.5節,作者： 【美】estelle weyl , louis lazaris , alexis goldstein 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
我們已經介紹了頁面結構的基礎以及在此方面非常有幫助的html5元素。現在我們将開始建立有内容的網頁部分。
使用header元素，從頂部開始。首先在此包含徽标、名稱以及智語。我們還可以在網站導航中添加nav元素。
在添加header元素後，網站的内容被分為3列。在您使用section元素時，可以停下來思考其内容。如果每一部分包含一個獨立的“部分”資訊（比如體育部分和娛樂部分），那将非常有意義。因為，分成獨立的欄目僅是一個可視化的安排—是以在每一列，我們将使用普通的老元素div。
在div裡面，我們可以包含報紙文章。當然，這些也是article元素的候選者。
而在最右列，除了一篇文章，還有3個廣告。我們将使用一個aside元素來包含廣告，每一個廣告放在article``元素中。這似乎很奇怪，但回頭看看文章描述：“一個自我包含的組成部分[...]也就是說，從原則上講，是獨立分布或可重複使用的。”一個廣告與該海報完美比對，因為它通常沒有修改以在許多網站上轉載。
下一步，我們将為出現在廣告下面的最後一篇文章添加article元素。這最後一篇文章将不被包括在儲存了3個廣告的aside元素中。如果要使其歸屬于aside元素中，article元素中的内容将需要與網頁内容無關。但是事實不是這樣的：article元素内容是頁面中主要内容的一部分，是以将它放在aside元素中是錯誤的。
現在，第三列由兩個元素組成：aside和article元素，其中一個放在另一個上面。為了将它們放在一起并容易設定其風格，我們将它們放在div元素中。我們在這裡不使用section元素或其他語義标記，那樣就意味着article和aside有某種局部的關系，但它們不是—在這裡隻是我們設計的一個功能，而它們恰巧在同一列中而已。
在頁眉下方，出于樣式目的，還有一個完整的上半部分包含在通用的div元素中。
最後，我們在其傳統的位置—頁面底部添加footer元素。由于包含了一些不同的内容塊，而每一個内容塊都形成了自我包含和主題相關的機關，我們将這些分到section元素中。作者資訊将形成一個部分，而每一個作者都在自己嵌套的section元素中。這樣，另一個section`元素放版權和其他資訊。
讓我們在頁面添加新元素，文檔如下：
我們現在已有了一個結構，可以作為内容的堅實基礎。
