HTML 5有種類豐富的語義結構新标記，除了與塊元素有很多相似性外，還擁有自身的語義行為。在制作一個HTML 5頁面時，首先要告知浏覽器使用何種HTML或XHTML規範，在HTML 5出現之前，經常看到冗長的規範文法，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona1.dtd">
HTML 5簡化了這一約定，而且不區分大小寫，DOCTYPE如下：
<!DOCTYPE html>
通過一張頁面結構示意圖檢視頁面基礎構造，如圖所示
頁面被分為6個區域，分别為：标題、導航、介紹、主内容、側邊欄、頁腳。
（1）頁面基礎結構代碼如下：
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>簡單的HTML 5頁面</title>
05 <link rel="stylesheet" href"../css/blog.css" type="text/css" />
<!-- 頁面依賴樣式表 -->
06 </head>
07 <body>
08 <header> <!-- 标題 -->
09 <h1>HTML 5</h1>
10 </header>
11 <nav></nav> <!-- 導航-->
12 <section class="intro"></section> <!-- 介紹-->
13 <section class="maincontent"><section> <!-- 主内容-->
14 <aside></aside> <!-- 側邊欄-->
15 <footer></footer> <!-- 頁腳-->
16 </body>
17 </html>
(2) 導航區域可以使用HTML 5或者XHTML結構，一個無序的UL清單，關鍵是該清單必須放在nav标簽内部，導航清單代碼如下：
01 <ul>
02 <li class="selected"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >部落格</a></li>
03 <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >關于</a></li>
04 <li>< a href="#>練習</a></li>
05 </ul>
(3) 介紹區域使用了section标簽，并添加了名為intro的樣式類，同時還在内部添加header标簽，用于表示介紹區域的個體标題，這裡可以看出header的用法，除了在整個文檔中使用之外，還能在局部的section區域中使用，介紹區代碼如下：
01 <section class=" target="_blank" rel="external nofollow" intro"></section>
02 <header>
03 <h2>什麼是HTML 5</h2>
04 </header>
05 <p>HTML 5是用于取代1999年所制定的HTML 4.01和HTML 1.0标準的HTML标準版
06 本，現在任處于發展階段，但大部分浏覽器已經支援某些HTML 5技術。</p>
07 </section>
(4) 主内容區同樣使用了section标簽,由于内容顯示的是部落格的文本，是以在内部添加一層article标簽的嵌套，代碼如下：
01 <section class="mainContent">
02 <article class="blogPost">
03 <header>
04 <h2>HTML 5新标簽</h2>
05 <p>
06 時間<time datetime="2013-7-1">2013-7-1</time>
07 作者 <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >小周</a>
08 </p>
09 </header>
10 <p>通過制定如何處理所有HTML元素以及如何從錯誤中恢複的精确規則，
11 HTML 5改進了互操作性，并減少了開發成本。HTML 5還包含了新的元素，
12 比如:<nav>, <header>, <foot>, 以及<figure> 等等。</p>
13 </article>
14 </section>
（5）aside标簽通常定義主體之外的内容，但是又與附近内容相關，一般會用于填充一些不同分類的内容，本例使用aside标簽制作側邊欄，放置文章分類的标簽，代碼如下：
01 <aside>
02 <section>
03 <header> <!-- 标題-->
04 <h3>标簽</h3>
05 </header>
06 <ul>
07 <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >HTML 5</a></li> <!-- 分類内容-->
08 </ul>
09 </section>
10 </aside>
(6)最後一塊内容是footer标簽所表示的頁腳，通常出現在section或者document的尾部，可包含一些與站點或者内容相關的資訊，如作者資訊、站點導航、友情連結等，本例所用的footer代碼如下：
01 <footer> <!--頁面頁腳-->
02 <div>
03 <section id="about"> <!-- 關于-->
04 <header>
05 <h3>關于</h3>
06 </header>
07 <p>關于内容</p>
08 </section>
09 <section id="blogroll"> <!-- 友情連結-->
10 <header>
11 <h3>友情連結</h3>
12 </header>
13 <ul>
14 <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >大衆點評網</a></li>
15 </ul>
16 </section>
17 <section id="popular"> <!-- 相關流行内容-->
18 <header>
19 <h3>流行</h3>
20 </header>
21 <ul>
22 <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >流行内容</a></li>
23 </ul>
24 </section>
25 </div>
26 </footer>
HTML 5的到來使得浏覽器更容易實作複雜布局，開發人員可以使用更少的時間是實作以前的功能，同時可以将節約下來的時間去學習一直被前端開發者忽略的事情，如前端性能優化、前端架構等。