HTML5 帶來什麼變革？

• 語義化結構元素：`
  `, `
• 簡化的文檔類型：`< !DOCTYPE html>` — 易記、不區分大小寫、觸發所有瀏覽器標準模式。
• 增強型表單：新輸入類型 (email, date, number...)、驗證屬性 (required, pattern)、原生 UI。
• 多媒體原生支援：`
• 離線/儲存/通訊 API：LocalStorage, IndexedDB, Service Worker, WebSocket, Geolocation...

本文聚焦**語義結構元素**的實戰應用與兼容策略。

極簡文檔類型

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <title>頁面標題</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  ...
</body>
</html>

無需記憶冗長 DTD URL，IE6+ 皆進入標準模式。

核心語義結構元素詳解

<header> — 頁首/區塊頭部

包含：Logo、站點標題、導航、搜索、用戶菜單。**可多次使用** (頁面級、文章級、區塊級)。

<header role="banner">
  <h1>站點標題</h1>
  <nav>...</nav>
</header>

<article>
  <header>
    <h1>文章標題</h1>
    <p class="meta">作者 · 日期</p>
  </header>
  ...
</article>

<nav> — 主要導航區塊

**僅用於主要導航區塊** (主選單、側邊欄導航、麵包屑、分頁)。頁腳版權鏈接、側邊欄廣告鏈接**不應**用 `