為什麼要用語意化標籤？
HTML5 標準中有很多語意標籤 (semantic elements)，讓網頁可以利用來建立更語意化的結構內容，幫助搜尋引擎和開發者可以更清楚的解讀網頁結構，提昇SEO時可以更容更容易辨識網頁結構，提升搜尋排名等效果。
而網頁結構語語意化也可以讓身障使用者更容易的瀏覽網頁，清楚得結構可以讓電腦辨識網頁時知道那些部分是文章、標題、導覽列，也讓網頁語音呈現時不會有不知道該從哪開始讀，就全部從HTML的開頭開始唸起的問題產生
目前NUXT有針對head封裝出可以用js設定的方式
head類型
- title此文字會呈現在搜尋結果的畫面上
- description呈現方式
用來提供網站的簡短說明
<meta name="description" content="網頁簡短描述">
body類型
結構語意標籤只是區分出與div的差別，並沒有基本的樣式，就只是個有名字的div
結構語意標籤
- header
如果是在body，表是為該網頁的首頁，在article或section中，代表為該文章區塊的首要區塊
- nav
- nav(navigation area)中的內容是此網站的主要導覽連結，該網站的主菜單
- 一個網頁可以有很多的nav(網站導覽、頁內導覽)
- 不是所有的連結都適用nav，像是footer連結內容通常不需要
- nav 屬性介紹
- main
- 放置頁面的主要區塊
- 一個頁面只能有一個main
- 理想中main裏不可以有nav、article、aside、footer、header
- article
- 網站中獨立、可複用的結構，像是商品列表、篩選列表等
- article中可以有多個section
- article 屬性介紹
- section
- 自訂的最小區塊
- 通常會需要有個標題(h1,h2 ...)
- 如果該內容是有意義的區塊，article可能為更好的選擇
- aside
- 與該頁其他內容無關的部分
- 單獨拆出不會受到整體影響
- footer
- 常表示於一個網頁的頁腳
- footer通常包含該章節作者、版權數據或是與文檔相關的鏈結訊息
以下有網站整理出，結構化標籤的使用範圍討論，不知道要怎麼使用可以先參考這圖片
其他語意化標籤
- figure
- 一段獨立的內容
- 經常與說明figcaption一起使用
- 位置獨立，常用於引用圖片、表格、代碼段
- figcaption
- 用於描述父節點figure元素
- 通常為圖片的說明/標題
- img
- 表示圖片
- 需有alt屬性，SEO較佳
<img src="圖片位址" alt="圖片描述">
- video
- 播放影片或串流功能
- 使用時需指定poster(指定圖片位址)屬性，SEO較佳
- Google SEO Document
- mark
- 螢光筆效果
- 顯示有特殊意義的文本
<p><mark> 元素用于 <mark>高亮</mark> 文本</p>
- time
- 表示標示時間
<p>The concert starts at <time>20:00</time>.</p> <p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
- a
- 網址連結用
- 可解析的寫法：Google 超連結文件
其他標籤
不確定SEO 吃不吃 他們通常會有不同的畫面樣式效果 沒有第三方UI庫可以 try try see
- details
- 會創建一個可展開收起的畫面(notion toggle效果)
- 該標題需要使用summary處理
- summary
- 使用在details裡面
- 用於表示該畫面的標題
- form系列
- fieldset
- legend
表單的框線，可以搭配legend產生表單名稱
表單的標題，父元素必須為fieldset