2.1 語意結構標籤
在還沒有 HTML5 之前，是單純使用 <div> 來創造頁面的各個區塊，如下圖：
但 <div> 本身是沒有語意的，不利於 SEO。所以在 HTML5 開始之後，有了新的規範，讓以上各個頁面區塊，重新賦予實際的意義：
<header>
通常表示的是一個頁面或區域一開始的引導內容。
例 1：
例 2：
<footer>
通常表示的是一份文件或區域的尾部內容。
例 1：
例 2：
<nav>
代表該網站的主要導覽連結。就可以用 nav 標籤包起來。
例 1：
例 2：
例：
<article>
主要表示的是一個獨立、擁有自有內容的一個區塊。
例：以下兩個 article 標籤，語意上，代表擁有自己的獨立內容。
<section>
主要表示的是一個「區域」的概念。
另外，<header> 、 <footer> 、<aside> 也是屬於 <section> 的一種，
只是 <header>、<footer>、<aside> 比 <section> 更明確化。
例：
例：
原始碼：
<aside>
表示側邊欄的語意，通常與周圍的內容有相關性。
例：
<main>
表示的是一份文件的主內容。需要注意的是一個網頁中，最多只能出現一次 <main> 標籤。
而且 <main> 標籤不能是這些標籤的子元素：<article>、<aside>、<footer>、<header>、<nav>。
例：
使用 W3C Markup Validation 工具，來驗證看看。(將 <main> 標籤放在 <section> 標籤裡面。)
<figure> 與 <figcaption>
表示的是一段自有的獨立內容，通常是一個圖片或段落或原始碼等。就用 <figure> 標籤包起來，而 <figure> 表示的是該內容的標題，可以放在 <figure> 標籤裡面的最一開始或最後面。
例：
或
其它例子。
參考：HTML <figure> Tag、HTML <figcaption> Tag
<time>
針對一段文字，表達日期、時間的語意，可使用 <time> 標籤，也可搭配 datetime 屬性，設定時間。
例：
<mark>
在一段文字當中，想要將裡面的某段文字強調出來，就可以加上 <mark> 標籤。例：
Last updated