HTML5 的最新規格中，提供了一系列語意標籤（Semantic Elements），包括 <header>、<nav>、<main>、<footer>、<mark>、<time> 等等。若您已經具備網頁設計基礎，這些新標籤是非常容易上手的，請參考以下說明：

什麼是語意標籤？

假設您已經知道如何使用 <div> 和 <span> 進行網頁排版的工作（請參考 JavaScript 前端工程入門課程），那麼語意標籤和 <div>、<span> 在排版上具有完全一樣的特性，意即以下幾對 HTML 標籤在版面顯示上是完全相同的：

<div>Hello</div>
<header>Hello</header>
<main>Hello</main>
<footer>Hello</footer>

既然語意標籤和 <div> 有相同的排版特性，那為什麼要使用語意標籤呢？最大的目的，是讓搜尋引擎或是其他軟體工具，可以更清楚的了解網頁中每個區塊的設計目的，提升網頁生態圈的資訊交流，更便於分享、查詢，因此，也有增強網頁 SEO 的效果。

語意標籤的使用時機 / 意義

• <header>：網頁的標頭，通常放置網站標題。
• <nav>：網頁的選單、導覽。
• <main>：網頁的主要內容。
• <aside>：網頁的側欄、附加內容。
• <article>：一篇文章內容。
• <section>：自訂的區塊，例如數篇摘要組成的空間。
• <footer>：網頁的頁尾，通常放置聯絡方式、著作權宣告等等。
• <mark>：強調一小塊內容。
• <time>：顯示日期時間。

簡單的使用比較和範例

首先是使用 <div> 可能的網頁結構，除了基本元素之外，主內容展示一篇文章和側欄，頁尾則顯示網頁最後更新的時間：

<div class="header"></div>
<div class="nav"></div>
<div class="main">
    <div class="article"></div>
    <div class="aside"></div>
</div>
<div class="footer">
    Updated on <span class="time"></span>
</div>

接著改用語意標籤，語意標籤和 <div>、<span> 一樣，沒有預設樣式。

<header></header>
<nav></nav>
<main>
    <article></article>
    <aside></aside>
</main>
<footer>
    Updated on <time></time>
</footer>

來點結語

無論技術如何演進，打好紮實的基礎永遠是最重要的工作。以語意標籤為例：對於已經掌握網頁排版技巧的人來說，是小菜一碟、錦上添花；反之，對不懂基礎排版的人，用處就很小。小小想法，與大家共勉 :)