<header>標簽
<header>標簽定義文檔的頁眉（介紹信息），用法：
<header><h1>阿邦Dreamweaver專欄</h1></header>
<nav>標簽
<nav> 標簽定義導航鏈接的部分，用法：
<nav>
<ul>
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
</ul>
</nav>
<section> 標簽
<section> 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分，用法：
<section>
<h1>標題一</h1>
<p>文章段落內容</p>
</section>
<article> 標簽
<article> 標簽定義外部的內容。
外部內容可以是來自一個外部的新聞提供者的一篇新的文章，或者來自blog的文本，或者是來自論壇的文本。亦或是來自其他外部源內容。總之，可以理解為article所表示的就是文章內容。用法：
<article>
<a href="#">文章內鏈接</a><br />文章內容文章內容文章內容
</article>
<aside> 標簽
<aside>標簽定義article以外的內容。aside的內容應該與article的內容相關，如上圖所示，它類似於布局中的輔助側邊欄。用法：
<aside>
<h4>小標題</h4>
段落內容段落內容
</aside>
<footer> 標簽
<footer> 標簽定義section或document的頁腳。在典型情況下，該元素會包含創作者的姓名、文檔的創作日期以及/或者聯系信息，也就是類似於版權信息的東西。用法：
<footer>頁腳文字，版權信息等</footer>
如果要達成上圖的效果，整體的Html5代碼應該如下：
<!DOCTYPE html>
<html>
<head>
<title>Html5示范文檔</title>
</head>
<body> <header>
<h1><a href="#">阿邦Dreamweaver專欄-Html5布局示范文檔</a></h1>
</header>
<nav>
<ul>
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
</ul>
</nav>
<section>
<header>內容標題</header>
<article>文章內容</article>
<footer>文章版權內容</footer>
</section>
<aside>相關內容</aside>
<footer>頁腳、頁面版權內容</footer>
</body>
</html>
完整的Html5代碼如上所列，但它只是Html的代碼結構，如果讓它變成上圖那種樣式，仍需要CSS代碼支持，這時候可以用到CSS3。