剛接觸HTML的新手與熟識tag的老手可能會寫出以下不同的code:
左邊稱做Non-semantic code，右邊則為Semantic code。以上兩支程式在實際瀏覽器呈現的模樣是相同的，但意義上南轅北轍。
想像一下，今天大街上出現兩個人，一位衣著襯衫且手提電腦包，另外一位的穿著十分樸素與路人別無兩樣。這時，一般人直覺會認為第一位的職業有可能是一位工程師，反而第一眼無法判別第二個人的職業。
同樣地，對比兩份程式碼，我們知道header可以代表一個網頁最上面的區塊，而nav(navigation)則條列一些連結供有興趣的訪客另行拜訪。這兩者最大的目的就是使看到的人可以「一眼」了解他們在網頁中的定位。
不只上述的兩種標籤，HTML5也提供其他類型的標籤供開發者使用。而這些被賦予意義的標籤被稱為語意標籤(Semantic Elements)。以下就來介紹HTML5引入的新元素分別有哪些。
nav
該元素含括的內容為導航訊息，通常會把一系列的連結包成一個nav。
一般而言，nav扮演的角色是輔助使用者探索網頁。
以下舉個栗子：(栗子好吃)
<nav>
<ul>
<li><a href="#Home"></a></li>
<li><a href="#Main"></a></li>
<li><a href="#Gallery"></a></li>
<li><a href="#Contact"></a></li>
</ul>
</nav>一個網頁的nav可以不只一個。比如說，一個放網站導覽，另外一個則是頁內導覽。但值得注意的是，不是所有連結都需要用nav把他打包。因為它適用於主要的導覽連結，而其他像是網頁底部的連結就不需要使用nav。
header
與headings(h1-h6)不同義，它可以是一個區塊、文章或整個網頁本身的前言，使訪客知道接下來的內容性質。最常見的就是現今每個網頁最上面常駐的那條，會包含該網站的logo與相關連結的地方。另外，header中的元素可以擺不只一個，舉個例子來說：
<article>
<header>
<h1>9 things you have to know</h1>
<p>By Chih-hsiang Chen Feb.13</p>
</header>
<p>Something...</p>
</article>也許在訪客眼中header所包含的資訊可能會經由CSS做特別處理，使得畫面的呈現與下面的內容有所分別；然而，對於search engine而言就有很大的區別了。透過設置header，搜尋引擎可以較清楚知道第一個<p>是獨立於該文章的一段文字，而不是把他當內文處理。
article
一個article element可以獨立於網頁與應用程式之外，具有獨立性、傳播性與可重複使用性的個體(independent content)。
Independent content：
一個個體具有獨立性必須要是當周圍的元素移走之後，其內文不受影響，無需受制於上下文，依舊能將原意表達出來。
最簡單的例子就是部落格、報紙與週刊等等。將任一篇文章拉出來，移至其他網站或是社群媒體時，我們可以發現它的原意並不受限於網路載體，因為他本身就具有獨立性。
因此，這個時候就應該使用<article>來包裝這些內容。
section
依照section spec中的定義：
The section element represents a generic document or application section…
A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
也就是說，若我們可以明確地條列一篇文的前言、主文與結論，那section會是一個好的選擇。在section中，通常需要一個heading使瀏覽器可以知道該section想要陳述的主題。
對於一些人，可能對於section和div之間會混著用，但這是一個錯誤的認知。section最常使用在章節(chapters)上，因為其被賦予語意上的意義。
至於div，若一般只是做Styling或方便Javascript操作元件，依據spec的建議，直接使用div會來得更好。
▶️ article, section與div的階級關係以英文做解釋：
1. article: an independent, self-contained block of related content
2. section: only a block of related content
3. div: a block of content
aside
當有些內容與當前的主文無關時，若需要呈現在畫面上，我們可以使用<aside>元素來包裹這些內容。
舉個簡單的例子：
若文章中提及Taiwan但內容並不是以其為主體時，可以額外做介紹而不影響文章本身。<aside>
<h1>Taiwan</h1>
<p>Taiwan, a land in zone of subtropical climate, has a large number of amazing cultural and historical buildings.</p>
</aside>
除此之外，aside亦可作為sidebar使用。當文章有多個章節或段落，我們可以為這些章節附加id，並建立一個sidebar固定在頁面上，供訪客可以快速跳轉到他們有興趣的段落，實際上也不影響本來的文章內容。
footer
一個footer代表離他最近(結構上)區塊的底部區域。一般來說，可以擺一些關於該區塊的資訊，例如作者名稱、相關連結或是著作權說明等等。
另外，如果作為整個網頁(body)的footer，那可以放一些關於這個網站的附錄，像是站外聯絡資訊、服務條款、版權說明或使用者隱私權。
另外要注意，因為一個footer就是一個區塊的結尾，它並不是sectioning content，因此它不會有任何section被包在其中。
figure、figcaption
一看到figure就會馬上聯想到img是基本道理。但馬上又會有一個疑惑 — figcaption是做什麼的？下面以Unsplash簡單示範一下：
從上圖，我們看到兩個物件：圖片(img)與下方標題(figcaption)。標題表明上方的圖片的用意與出處，而圖片可以自我闡述(self-contained)一些訊息。
與前面講到的<article>些許相似，<figure>本身也具有可自我闡述的性質，但不一定完全獨立於整篇文章，可能會與某句話做連結。反之，當圖片本身是句子的一部分時，就不適合使用<figure>。
值得注意的是，figcaption中的內容不宜使用“above ”或“next”等字眼。因為若我們重新排版，那有可能會更動到文字與圖片的相對位置，反而需要對句子下額外的功夫。因此，如同Fig 1.，我們以數字或符號當作圖片的代號，即便圖片位置改變，也不需要改變句子或figcaption的參考點。
結論
- nav：用於網頁的導覽列。
- header：一個區塊的標題。
- article：具有獨立性的區塊，內容與擺放位置無關。
- section：與上下文相關的區塊，常見於章節(chapters)。
- aside：與周圍無關的區塊，其內容不影響主文。
- footer：一個區塊的底部，適合擺放最近的區塊相關資訊。
- figure/figcaption：放置與某些句子相關的圖片，並給予編號與標題。
雖然在一般訪客眼中，Non-semantic與Semantic寫出來的網頁幾乎是一樣的，但在搜尋引擎眼中可就不是那麼一回事。如開頭講到的比喻，若我們的網頁擁有一身鮮明的特徵，對於搜尋引擎就可以一眼看出整體網頁的結構。
如果實在不知道如何運用，html5Doctor提供一張圖表給大家做參考：
除此之外，該網站也提供一個工具。只要將自己的html檔案上傳或複製上去，就可以幫你歸納出你的網頁的整體結構，讓你了解自己寫出來的網頁於搜尋引擎眼中長成什麼樣子。
📘參考資料
HTML Standard — https://html.spec.whatwg.org/#semantics
html5Doctor — http://html5doctor.com/element-index/
Interneting is hard — https://internetingishard.com/html-and-css/semantic-html/
後記:
其實我自己幾乎是第一次認真地了解semantic elements的用法。當初於課堂中，老師也沒有特別提及(可能是我自己不上進)。因此，我自己想先把以前沒有打好的基礎，再重新看過一次，也許才會知道現在自己的不足在哪。
除此之外，在撰寫這篇文章時，要把一些字詞轉換成中文會遇到詞窮的窘境。像是self-contained就不太清楚怎麼翻譯比較好，只好草草寫成「可自我闡述的」。
總之，語意化是HTML5的一大特點，不只讓搜尋引擎看懂你的網站，也幫助很多身障人士更方便探索你的網站。那喜歡我的文章的話，請幫我多按個讚喔🙌！
我是阿祥，我們下次見～
