HTML 核心概念十分鐘速成：從全稱到文檔結構、標籤規則與語意化原則

全稱拆解

• HyperText：超文本，透過超連結非線性組織資訊。
• Markup：標記語言，用標籤賦予內容結構與語意。
• Language：語言，擁有語法規範 (W3C/WHATWG 標準)。

最小合法 HTML5 文檔

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>頁面標題</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

兩大區塊職責

區塊	標籤	內容	可見性
頭部	<head>	中繼資料：編碼、標題、樣式、腳本、SEO、圖示、Viewport	不直接顯示
主體	<body>	使用者可見內容：文字、圖片、表單、影音、互動元件	直接顯示

標籤三大鐵律

1. 巢狀正確：內層先關閉 <div><p></p></div>。
2. 成對出現：除空元素 (img, br, hr, input, meta, link...) 外皆需結束標籤。
3. 語意優先：選標籤看「內容是什麼」，不看「長什麼樣」(那是 CSS 的事)。

常見空元素 (Void Elements)

<area> <base> <br> <col> <embed> <hr> <img> <input> <link> <meta> <param> <source> <track> <wbr>

字符編碼鐵律

• 檔案存 UTF-8。
• <meta charset="UTF-8"> 放 <head> 第一行。
• 伺服器回應 Content-Type: text/html; charset=utf-8。

遵循以上基礎，即可撰寫合法、可存取、SEO 友善的 HTML 文檔。