{%hackmd theme-dark %}
###### tags: `tutorials` `HTML`
# HTML Sementic elements

## 什麼是語意區塊?
在HTML5之前，區塊只能用div編輯，一眼望過去全都是div組成的區塊，你很難一眼判別這個區塊是網頁的哪一個位置，而semantic elements可以快速抓到網頁的架構跟每個區塊的位置，還可以優化SEO搜尋，像是`<header>、<nav>、<footer>`等

## 呈現方式

<header>開頭
    <nav class=”row”>導覽列 </nav>
</header>
<div class=”clear-fix”></div>
<main class=”row”>
    <aside>
        我是側邊攔
    </aside>
    <article class=”star”>整篇文章開始
        <section>第一章包覆區塊
            <h2>第一章標題</h2>
            <p>第一章內文</p>
            <figure>我要包圖片</figure>
        </section>
        <section>第二章包覆區塊
            <h2>第二章標題</h2>
            <p>第二章內文</p>
            <article>專有名詞區塊
                <section class=”introduction”>專有名詞第一章包覆區塊
                    <h2>專有名詞第一章標題</h2>
                    <p>專有名詞第一章內文</p>
                </section>
            </article>
        </section>
    </article>
    <div class=”clear-fix”></div>
    <footer>我是頁尾</footer>
</main>

## 介紹
### header頁首標籤
大多設置於網頁的開頭，網頁的頁首，通常放在頁面最上方。也有些會使用在`<section>`中，那就是在這個段落中的開頭部分
### nav導覽列
使用在導覽網站的標籤，像是我們常常打開的主選單，下拉式的選單，頁尾所看到的一些選單
### article區塊
用於包覆整篇文章的標籤，定義必須要有很高的獨立性跟完整性，即便脫離這個架構，也能自己完整的存在
### section文章區塊
用於包覆文章內文中，一個專欄或者一個章節的區塊，要搭配heading(h1~h6)使用，以前要幫內文排版，只能使用div，但使用section之後，就可以讓div去負責完全無意義的區塊，而非包覆內文區塊
### article與section的區別
article是一個完整的文章，本身被分離出來，也不會影響整個架構跟閱讀性，而section更像是文章中的某一個章節，例如一個小說少了第二章直接跳第三章，你就看不懂這在寫什麼了

但由於標籤特性沒有明確的定義巢狀的規則，因此在實務上可以看到article包覆section或者section包覆article

從第一段描述認為應該是article包覆section，但如果以某個章節有個專業名詞解釋，而這篇解釋需要用到整篇文章來解釋，而將這篇獨立article包覆的文章貼於section包覆的內容中，但即便拿掉也不影響閱讀
### aside側欄
一般這個區塊跟內文無關，通常是在左右兩側，增添廣告、分類、作者資訊、聯絡表單、推薦文章等之類的區塊，但不一定是要在側邊才能使用
### footer頁尾
一個網頁的結尾，大多用於網站的連絡資訊，作者資訊，隱私權政策等。如果不是放在body，則可以表示為某個區塊的結尾，一篇段落的結尾，一個表格中的最後一行
### figure
他是一個完整的區塊，是主要內容的一部分，通常用於包覆圖片、影音檔、圖表等，而且一個重要的定義在於，他是可以任意移動，且不影響整體內容的表達，所以並不是每張圖片都要包覆figure

## Reference
https://rollerblade.tw/semantic-elements/
https://www.w3schools.com/html/html5_semantic_elements.asp