# HTML5 Semantic tags

**在TIME時代雜誌的切版練習中發現有大量的HTML語意化標籤， 對於我而言不算太熟悉，所以整理一下有那些常見的tag及使用時機**

## 為什麼需要語意化
**在HTML5以前大都只是使用大量的div來表現不同的區塊，HTML5後便可以依照不同的情境搭配不同語意的標籤，達到強化SEO的效果，當然對UI來說是沒有太多區別的，語意化標籤主要是給搜尋機器人看的。**

## 常見tag，使用方式

### <header> <main> <footer>
這三塊蠻直覺的，main表示主要的區塊，需要注意的是每個頁面中只能有一個<main>且不能被包在一些怪胶的tag中，header用來表示表頭，不一定單指最上層的導覽列，區塊中的導覽列也可以使用。footer的概念也很類似，常用來表示表尾，但也可以使用在區塊中。

### <section> <article>
使用section來代表一個區塊並搭配h1~h6，讓機器知道這區塊主要表達的意思，而article則是專門用來表示文章也可以只用h1~6來賦予主題。
### <aside>
字面看起來是側面欄，但其實是表示與本文不相關的區塊例如廣告、推薦文章等，並不代表這個佈局一定是要放在側邊位置，只要他是跟主要區塊所論述的事項無關的額外資訊。
### <nav>
導航區塊都可以用nav來表示。
### <figure> <figcaption>
這次實作中算是第一次看到，主要用figure來表示圖片的區塊，figcaption來表示圖片的標題，大多以figure來包覆figcaption。

當然還有很多很多語意化的tag
[參考文章](https://medium.com/@changru.studio/%E5%BF%AB%E9%80%9F%E4%BA%86%E8%A7%A3html%E8%AA%9E%E6%84%8F%E5%8C%96%E6%A8%99%E7%B1%A4-33dd8247d779)
[參考文章](https://ithelp.ithome.com.tw/articles/10195356)
[參考文章](https://ithelp.ithome.com.tw/articles/10195643)