Day 41 - HTML Semantic Elements 語意標籤

作為 <div> 的替代 tag，使網頁更有原始描述更易讀且有意義。

語法

<header>
- 網頁的標頭
- 適合放置網站標題、LOGO、主要的導覽列(main navigation)
<nav>
- navigation 網頁的選單、導覽
- 常搭配清單的 tag （即<ul> 和 <ol>）
- 視需求而可在同個網頁設置多個 <nav>
<main>
- 網頁的主要內容
<aside>
- 網頁的側欄、附加內容
- 適合放置廣告內容、側邊導覽列(sidebar)
<article>
- 一篇文章內容
- 通常一個頁面只會有一篇文章
<section>
- 自訂的區塊，例如數篇摘要組成的空間
- 至少要有一個 heading，不然會被定義為 untitled section
- 表示需要比 <div> 更多描述才適合使用
<footer>
- 網頁的頁尾
- 適合放置聯絡方式、著作權宣告、社群連結和作者簡介等等
<mark>
- 強調一小塊內容
<time>
- 顯示日期時間
- 可添加 datetime 屬性
<address>
- 通常放在 <footer> 裡
- 可以是必要的任何一種聯系方式，如真實地址、URL、電子郵箱、電話號碼、社交媒體賬號、地理坐標等等。
- 應該包含聯系信息對應的個人、團體或組織的名稱。
<figure>
- 常會把 <img> 放在裡面
- 可搭配 <figcaption>，可把圖片說明放在 <figcaption> 裡面，
- 有用 <figcaption> 的話，可以省去 <img> 裡的 alt 屬性。

因為這些 tag 都是 HTML5 以後新增的，如果要支援舊的瀏覽器（即無法識別 HTML5 內容），則可設置以下 CSS

section, article, aside, footer, header, nav {
  display: block;
}

這樣就可以讓這些 semantic elements 像 <div> 一樣以 block 形式呈現。