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 形式呈現。

參考

1. MDN Semantics
2. New Semantic Elements in HTML5
3. semantic html - interneting is hard