2.1 語意結構標籤
在還沒有 HTML5 之前，是單純使用 <div> 來創造頁面的各個區塊，如下圖：
但 <div> 本身是沒有語意的，不利於 SEO。所以在 HTML5 開始之後，有了新的規範，讓以上各個頁面區塊，重新賦予實際的意義：
<header>
通常表示的是一個頁面或區域一開始的引導內容。
例 1：
<body>
<header>
<!-- 其它 header 資訊 -->
</header>
<!-- 其它頁面內容 -->
</body>例 2：
<article>
<header>
<h1>Most important heading here</h1>
<h2>Less important heading here</h2>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article><footer>
通常表示的是一份文件或區域的尾部內容。
例 1：
<body>
<!-- 其它頁面內容 -->
<footer>
<!-- 其它 footer 資訊 -->
</footer>
</body>例 2：
<article>
<!-- 其它內容 -->
<p>Lorem Ipsum dolor set amet....</p>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>
Contact information:
<a href="mailto:[email protected]">[email protected]</a>.
</p>
</footer>
</article><nav>
代表該網站的主要導覽連結。就可以用 nav 標籤包起來。
例 1：
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a>
</nav>例 2：
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</nav>例：
<article>
主要表示的是一個獨立、擁有自有內容的一個區塊。
例：以下兩個 article 標籤，語意上，代表擁有自己的獨立內容。
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article><section>
主要表示的是一個「區域」的概念。
另外，<header> 、 <footer> 、<aside> 也是屬於 <section> 的一種，
只是 <header>、<footer>、<aside> 比 <section> 更明確化。
例：
<body>
<header>
<!-- header 內容 -->
</header>
<section>
<h2>HTML</h2>
<p>HTML 是超文本標記語言。</p>
</section>
<footer>
<!-- footer 內容 -->
</footer>
</body>例：
原始碼：
<aside>
表示側邊欄的語意，通常與周圍的內容有相關性。
例：
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside><main>
表示的是一份文件的主內容。需要注意的是一個網頁中，最多只能出現一次 <main> 標籤。
而且 <main> 標籤不能是這些標籤的子元素：<article>、<aside>、<footer>、<header>、<nav>。
例：
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>網頁標題</title>
</head>
<body>
<main>
<h1>Web Browsers</h1>
<p>Chrome, Firefox, and Edge are the most used browsers today.</p>
<article>
<h3>Google Chrome</h3>
<p>Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>
<article>
<h3>Microsoft Edge</h3>
<p>Edge is a free web browser from Microsoft, released in 1995.</p>
</article>
</main>
</body>
</html>使用 W3C Markup Validation 工具，來驗證看看。(將 <main> 標籤放在 <section> 標籤裡面。)
<figure> 與 <figcaption>
表示的是一段自有的獨立內容，通常是一個圖片或段落或原始碼等。就用 <figure> 標籤包起來，而 <figure> 表示的是該內容的標題，可以放在 <figure> 標籤裡面的最一開始或最後面。
例：
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>或
<figure>
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
<img src="pic_trulli.jpg" alt="Trulli">
</figure>其它例子。
參考：HTML <figure> Tag、HTML <figcaption> Tag
<time>
針對一段文字，表達日期、時間的語意，可使用 <time> 標籤，也可搭配 datetime 屬性，設定時間。
例：
<p>每天早上 <time>10:00</time> 開始營業</p>
<p>在<time datetime="2020-01-01 10:00:00">元旦</time>那天有聚會。</p><mark>
在一段文字當中，想要將裡面的某段文字強調出來，就可以加上 <mark> 標籤。例：
Last updated