前言

自從HTML5新增語意化標籤以來，讓HTML的標籤更直觀也更具有意義，同時幫助搜尋引擎和開發人員能更清楚的解讀網頁。

HTML語意化標籤

語意化標籤是什麼意思?其實是指標籤本身就具備語意意義，直接看標籤就可以清楚明白目前這個區塊是在描述網頁中的什麼部分，例如在HTML5以前，可能會使用大量的div來表示區塊，但div其實有時很難直接立下判斷是在哪個區塊，所以都會針對需求加入class來更清楚區分出區塊，但今天如果使用像是header、footer這樣的語意標籤，就能從標籤直接快速的了解到現在在觀看的是哪個部分的內容。

常見的語意化標籤：

1. header
   代表網頁頁首，通常標籤裡面會包含網站的標題、導覽列及搜尋工具等內容。
2. nav
   最常見的導覽列應該是網頁頁首會看到的首頁、關於我們、聯絡我們等等的資訊，但其實nav的使用不僅限於頁首，只要是頁面會需要某種選單的導覽區塊都很適合使用nav標籤。
3. aside
   比較常見的大概是放置側邊欄位、廣告等資訊，像MDN網站的側邊區域就有部分是採用aside標籤來進行撰寫。
4. main
   網頁主要內容的顯示區域，每個網頁只能有一個專門放置獨一無二的網頁中心內容。
5. section
   代表網頁中獨立段落的區塊，和div很相似，只是div是沒有明顯含義的區塊，所以兩者很常搭配使用(例如section內的區塊運用div來處理)。
6. footer
   和header相呼應的頁尾，通常會放置聯絡方式、社交媒體資訊、著作權相關資訊等等。

這邊只有先列出自己練習時比較常用的幾個來進行說明，其實HTML標籤說多不多說少不少，要用背的實在是太恐怖了，我自己的方式是開個codepen的pen存放目前沒那麼常用或不熟悉的標籤，至少實際使用過一次可以留點印象，而且如果未來有需要或是有事沒事都可以稍微翻看一下。