html5 Doctor 曾經釋出過下面這個圖，用來幫助你選擇最符合語義的 HTML5 元素。[1]

今天就跟著這張表來看看幾個最常用的 HTML5 標籤該怎麼用。

開始 --> 針對網頁內容的一個區塊：

1. 是否為主要的導覽區塊？
   YES -- 請使用 <nav>

   注意：使用 <nav> 標籤，必為 html 頁面中主要的導覽區塊，一些零散的 link 請不要用此標籤。

2. 此區塊自己本身有意義嗎？
   YES -- 請使用 <artical>

   注意：所謂的有意義是指有很高的獨立性與完整性，且帶有 heading，例如：報紙新聞文章、部落格文章、論壇文章等。

3. 需要他來了解當前的內容嗎？
   NO -- 請使用 <aside>
   例如：側選單、引文、廣告、註腳等等。

4. 可以將他移到附件、附錄嗎？
   YES -- 請使用 <figure>

   <figure> 重要的是移到哪裡都不會影響整個網頁的閱讀，他可以包括圖片、解說或程式碼片段。

5. 是否有邏輯的去增加一個標題？
   YES -- 請使用 <section>

   曾在某個網站看過產品清單是使用<section>標籤，裡面包含圖片、標題、價格等，而標題即為產品名稱是用<h2>heading。這樣也算是一個完整的區塊。

   注意：<section>可以存在<artical> 內，反之也可以，這兩個標籤並沒有定義說誰才可以包誰。

6. 是否有任何的語意？
   YES -- 請使用有語意的標籤如：<p> <address> <blockquote <pre>等等
   NO -- 如果沒有任何語意請使用<div>

   注意：因此在網頁製作上如果大量使用<div>對瀏覽器跟搜尋引擎來說並沒有任何的加分，因為 <div> 不帶任何語意，因此在不做任何其他特殊的SEO處理前，使用正確的 HTML5 語意化標籤就已經可以讓你的網站加分不少。

還沒試過 HTML5 語意化標籤的新手們，可以試試唷～各位看倌明天見囉～

參考資料：
[1] http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
[2] http://html5doctor.com/nav-element/
[3] http://phoebe-blog.logdown.com/posts/615224