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
#html #Web #semantic html #網路開發 #前端 #Front-End #Web Development #learning
從零學網頁開發
三十歲從零開始學網頁開發






Related Posts

從 SessionStorage 開始一場 spec 之旅

從 SessionStorage 開始一場 spec 之旅

JavaScript 邏輯運算 && ( and )、| | ( or )、!( not )

JavaScript 邏輯運算 && ( and )、| | ( or )、!( not )

[2] 品質工程師,不只是測試

[2] 品質工程師,不只是測試



Sponsored



Comments