最近身旁好友的網站，像是男丁、教不落已陸續的的將網站更新佈景主題，並也都改採HTML5的架構，但梅干遲遲還尚未跟進，最主要的原因就在於，梅干的部落格架構有點小複雜，所以得花點時間重新打掉重來，而HTML5也炒了好一陣子，雖然目前還沒Final，但基本的架構已經八、九不離十了，而梅干花了點時間，整理了一下HTML5的網頁架構，供各位作點參考，若想用HTML5的朋友們，也先來了解一下HTML5的語法結構吧！
HTML5新標籤說明：
其實HTML5的標籤相當多，這邊梅干挑出幾個常用的來跟大家作解說。
<header>
版頭，可甩來包覆logo。
<nav>
導覽列。
ex:<nav>教學網 iAPP網 購物網</nav>
<article>
獨立區塊。
ex:
<article>
<section>…..</section>
</article>
<section>
內容區塊，有點類似POST的，而此標籤可再包覆header與footer。
ex:
<section>
<header>標題</header>
<p>內容</p>
<footer>張貼日期：2011/12/25</footer>
</section>
<aside>
補充性資訊標記(如:廣告、貼紙)
<figure>
用來標註圖片、圖表和程式碼….等。
ex:<figure><img src="http://www.minwt.com/logo.png"></figure>
<footer>
版尾用來放置一些版權宣告、 隱私條件 、合作提案…等訊息。
ex:<footer>copyright 2011 by minwt</footer>
版頭，可甩來包覆logo。
<nav>
導覽列。
ex:<nav>教學網 iAPP網 購物網</nav>
<article>
獨立區塊。
ex:
<article>
<section>…..</section>
</article>
<section>
內容區塊，有點類似POST的，而此標籤可再包覆header與footer。
ex:
<section>
<header>標題</header>
<p>內容</p>
<footer>張貼日期：2011/12/25</footer>
</section>
<aside>
補充性資訊標記(如:廣告、貼紙)
<figure>
用來標註圖片、圖表和程式碼….等。
ex:<figure><img src="http://www.minwt.com/logo.png"></figure>
![http://www.minwt.com/logo.png"></figure>](http://www.minwt.com/logo.png"></figure>){kind=link}
<footer>
版尾用來放置一些版權宣告、 隱私條件 、合作提案…等訊息。
ex:<footer>copyright 2011 by minwt</footer>
ps.更多可見： http://www.w3schools.com/html5/default.asp
其實這幾個是比較常用的標籤語法，而HTML5最主要是用來簡化一些標籤用法，以及讓標籤更具語意，其Html5還有其它更多的互動效果與影音標籤，同時梅干也製作了一個簡易的HTML5網頁架構範本，因此各位可以直接下載使用，希望對想用HTML5的朋友有所幫助。
[範例預覽]