在HTML5之前采用HTML+CSS文檔結構寫法
【ID選擇器說明 id選擇器——用於標識頁面上特定元素(比如站點導航、頁眉、頁腳)而且必須唯一; 也可以用來標識持久結構性元素（如主導航、內容區域）】
【class選擇器說明 class類選擇器——可以應用於頁面任意多個元素，非常適合標識內容類型或其他相似的條目】
Diagram illustrates a typical two-column layout marked up using divs with id and class attributes.It contains a header, footer, and horizontal navigation bar below the header.
The main content contains an article and sidebar on the right.
（翻譯：上圖展示典型的兩列布局標記使用div的id和class類屬型.它包含一個頁眉，頁腳，橫向的導航欄.主要內容包含一篇文章和右邊的側邊欄 ）
缺點 1.不利於SEO搜索引擎對頁面內容的抓取
2.文檔結構定義不明確
於是HTML5出現，解決上述問題，專門添加頁眉、頁腳、導航、文章內容等跟結構相關的結構元素標簽
The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.
（翻譯:div元素被替換成新的元素：header 頁眉, nav 導航, section 區塊, article 文章, aside 側邊欄 , and footer 頁腳.）
HTML5結構代碼
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
對HTML5語義化標簽解釋
<main> 定義主要內容
<header> 頁眉，可能包含標題元素，也可以包含其他元素，像logo、分節頭部、搜索表單等
<header>
<hgroup>
<h1>頁眉主標題</h1>
<h1>頁眉副標題</h1>
</hgroup>
</header>
<nav> 定義主體模塊或者導航鏈接的集合
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>是一個特殊的section標簽，它比section具有更明確的語義，它代表一個獨立的、完整的相關內容塊，可獨立於頁面其它內容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等等。一般來說，article會有標題部分（通常包含在header內），有時也會包含footer。article可以嵌套，內層的article對外層的article標簽有隸屬關系。例如，一篇博客的文章，可以用article顯示，然后一些評論可以以article的形式嵌入其中。
<article>
<header>
<hgroup>
<h1>這是一篇介紹HTML 5結構標簽的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime="2011-03-20">2011.03.20</time>
</header>
<p>文章內容詳情</p>
</article>
<aside>與一個和其余頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。其通常表現為側邊欄或者嵌入內容。
<aside id="sidebar"> <section class="widget"> <h4 class="widgettitle">Sidebar</h4> <ul> <li><a href="#">WordPress</a> (3)</li> <li><a href="#">Design</a> (23)</li> <li><a href="#">Design </a>(18)</li> </ul> </section> </aside>
<section>表示文檔中的一個區域（或節），比如，內容中的一個專題組，一般來說會有包含一個標題（heading）。
一般通過是否包含一個標題 (<h1>-<h6> element) 作為子節點 來 辨識每一個<section>
<section> <h1>這里是section標題...</h1> <p>這里是section標題對於內內容...</p> </section>
<figure> 元素代表一段獨立的內容.用於對元素進行組合。多用於圖片與圖片描述組合。
<!-- Just a figure --> <figure> <img src="figure.png" alt="figure.png圖片按" title="figure圖片"> </figure> <p>段落</p> <!-- Figure with figcaption --> <figure> <img src="figure.png" alt="figure.png圖片按" title="figure圖片">picture"> <figcaption>figure圖片描述</figcaption> </figure> <p>段落.....</p>
<footer> 定義了整個頁面或其中一部分的頁腳（並且通常包含原創作者，版權信息，聯系方式和站點地圖,文檔相關的鏈接等信息）
<footer> 原創作者;版權信息;聯系方式;文檔相關鏈接等... </footer>
<hgroup> 標簽用於對網頁或區段（section）的標題進行組合。使用新的HTML5元素hgroup，可以為header元素添加更多的信息。（頭部主標題/副標題）
<hgroup> <h1>Main title</h1> <h2>Secondary title</h2> </hgroup>
【參考資料】
http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/
https://samdutton.wordpress.com/2015/04/02/high-performance-html/
https://developer.mozilla.org/CN/docs/Web/HTML/Element
http://www.cnblogs.com/houodeit/archive/2012/05/27/2519798.html
http://alistapart.com/article/previewofhtml5
https://dev.w3.org/html5/html-author/#syntactic-overview HTML5 API