HTML5語意怎麼寫才對？網站開發者必修 * 造九頑五

本篇會闡述如何正確使用HTML5的語意來撰寫一個網站的架構。如果不是開發者此篇文章可看上半部瞭解HTML5的概念，下半部是給專業的網站開發者看的，一般人可能無法理解。

HTML5是最新的HTML修訂版本，於2014年的10月才由W3C完成正式的修訂。如果有興趣知道更多詳情的請參考Wiki百科的HTML5頁面，這邊裴瑞將用自己理解後的觀點和比較淺顯的方式來介紹。

內容索引

1 HTML5：語言的進化，簡單例子了解HTML5語意
- 1.1 HTML5架構的網站有更好的SEO體質
2 HTML5實戰篇：語意的撰寫
- 2.1 取代div的HTML5區塊標籤
- 2.2 其他HTML5新增語意標籤

HTML5：語言的進化，簡單例子了解HTML5語意

在HTML5以前的HTML，比較著重在各個標籤的功能表現，像是<ＤＩＶ>標籤就是一個區塊，用來置放所有其他東西，<Ｐ>標籤就是一個用來放文字的段落，像是現在正在打的文章中的每個段落，就應該使用<P>標籤來包覆，<Ａ>標籤則是負責連結，<IMG>則是用來置放圖片，其他還有很多如<TABLE>、<UL>等⋯⋯基本上網站就是由很多標籤交織起來所產生的。

HTML5誕生後最重要的改變，就是多了HTML「語意」，以前HTML就像是原始人在溝通，比手畫腳，使用簡單直接的語言：「石頭！木材！肉！」簡單又直率。HTML5多了語意後則像是這樣：「把這顆尖銳的石頭給我。」「這批木材放到我的車上去。」「來吃點烤好的青蛙肉！」

比起以前你只能知道有什麼東西，並不知道他要幹嘛、他的模樣，多了語意之後就更清楚了。你可能會疑惑可是HTML5不是程式碼嗎？程式碼多了語意前台看起來還是一模一樣阿。沒錯！前台的訪客是看不出差別的，這是要給機器看的，像是搜尋引擎的機器人。

HTML5架構的網站有更好的SEO體質

如上所述，HTML5語意不是用來給人看的，是給機器讀的⋯⋯讓機器更好的判別：喔！原來你的網站這個「區塊」是一篇文章，而這個「區塊」是專門放置有關apple手機的資訊，另外這邊則是版權資訊，一切都更清楚了，因此機器人可能會給你「更好」的網站分數，更清楚的收錄你網站真正重要的資訊，人說HTML5有更好的SEO體質是這樣的由來。

HTML5實戰篇：語意的撰寫

取代div的HTML5區塊標籤

區塊標籤及文章區塊標籤<section>、<article>

以往我們需要建立一個區塊都會使用<div>，Html5則建議我們使用<section>搭配<h1~h6>標籤來告知機器，這個區塊<section>主要是講什麼的(標題就是這個區塊主要的內容)，而<section>內，一些無明顯意義的區塊或只是為了排版目的的區塊則使用<div>來包覆，因此<div>可以視作一個無語意的容器，而<article>則是專門用來包覆文章，一樣搭配標題<h1~h6>。

表頭表尾區塊標籤<header>、<footer>

以前用<div>架構會像這樣寫<div class="header"><div class="footer">、HTML5則可以直接使用<header>以及<footer>標籤來取代，但這兩個的用法不只在於<body>下的架構，而是任何大區塊中像是<body><section><article>如果有詳細的去區分表頭表尾區塊時⋯⋯就可以使用<header>以及<footer>來架構，用於<body>的情況應該是最普遍的，畢竟<body>的架構通常比較大，容易需要區分表頭表尾區塊。

側邊欄位標籤<aside>

邏輯上跟<header>以及<footer>使用方式一樣，像是WordPress或部落格常見的側邊欄就很適合用<aside>來做佈局，另外<aside>除了側邊欄之外，他的語意其實算是跟本文無關的區塊，也就是大架構下的額外資訊，像是部落格的側邊欄，通常放的是跟主要文本無關的其他額外資訊，例如其他連結、廣告、推薦文章等⋯⋯，因此使用<aside>的時候，並不代表這個佈局一定是要放在側邊位置，只要他是跟主要區塊所論述的事項無關的額外資訊，就可以用<aside>來做架構佈局。

主要區塊標籤<main>

在HTML5中用來放置這個頁面主要的資訊，有點像以前的<div class="content">，且每個頁面中只能有一個<main>標籤，且不能被放在<nav><article><aside><footer><header>之中。

導航欄專用<nav>標籤

只要是在網站內的導航區塊，都適合使用<nav>來做架構，像是主選單、表尾選單等⋯⋯。

HTML5選單架構方式:

<nav>
  <ul>
    <li>首頁</li>
    <li>關於我們</li>
    <li>聯絡我們</li>
  </ul>
</nav>

其他HTML5新增語意標籤

標題集合標籤<hgroup>

當內容有主標題及次標題等⋯⋯多個標題的狀況下使用。
HTML5<hgroup>使用方式：

<article>
  <hgroup>
    <h2>sub title</h2>
    <h1>Main Title</h1>(主標題)
  </hgroup>
</article>

圖片專用標籤<figure><figcaption>

在HTML5中專門用來放置圖片的標籤，使用方式為先用<figure>來包覆圖片區塊，再使用<figcation>來描述此張圖片的標題。 HTML5<figure><figcaption>使用方式：

<figure>
  <fugcaption>高雄景點照片集錦</fugcaption>
  <img src="images/img1.jpg" />
  <img src="images/img2.jpg" />
  <img src="images/img3.jpg" />
</figure>

時間標籤<time>

HTML5中專門用來標記時間
HTML5<time>使用範例：

<p>每天早上九點 <time>9:00</time> 開始營業。</p>
<p>我在 <time datetime="2018-08-08">父親節</time> 有個家庭聚餐。</p>

其他標明文本資訊的HTML5標籤

<small> 版權資訊或免責聲明, 注意事項等一些"附屬細則" 資訊, 如是整篇都為法律資訊的頁面則不須用small區隔 <mark> 如黃色螢光筆的方式畫出重點 <em> 類似mark, 但這是真正文中需要強調的部分, 而mark只是意在凸顯某區塊 <strong> 類似em, 但是通常用來包極重要的某句話或段落, em則是包某個詞 <b> 關鍵字或產品名 <cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。 <address> 應用於標記目前<article>或文件作者的連絡資訊, 而不是作為一般標記地址用