HTML，全名為「超文本標記語言」（HyperText Markup Language），是構成所有網頁的基石。它並非一種程式語言，而是一種標記語言，其核心任務是賦予網頁內容「結構」與「語意」，告訴瀏覽器哪部分是標題、哪部分是段落、哪裡又該放置圖片或連結，最終呈現出使用者所見的網頁畫面。
隨著網路技術的演進，HTML 演進至最新的 html 5 版本，不僅帶來了更豐富的功能，更強調了「語意化」的重要性。使用具有語意（Semantic）的標籤，不僅能讓搜尋引擎（SEO）更準確地理解您的網頁內容，也能提升網站對於螢幕閱讀器等輔助科技的無障礙性（Accessibility），同時讓開發者之間的協作與維護更加清晰高效。
本文旨在提供一份詳細且完整的 HTML 標籤指南。我們將從最基礎的元素、標籤、屬性概念談起，深入剖析 HTML 文件的基本骨架，並分門別類地介紹從 <head> 到 <body> 中最常用、最重要的標籤。無論您是初探網頁開發的新手，或是希望鞏固知識體系的資深開發者，本篇文章都將為您擴充腦中的海馬體，建構起對 HTML 標籤的全面認知。
HTML 的核心：元素、標籤與屬性
在深入了解各種標籤之前，必須先釐清幾個核心名詞的定義，它們是構成 HTML 的基本單位。
- 元素 (Element)：一個完整的 HTML 結構單元。這個元素定義通常由一個起始標籤、内容、以及一個結束標籤所組成，成為 a part of the 文檔。例如，<h1>這是一個標題</h1> 整體就是一個「標題元素」。一個 p 元素就代表一個段落。
- 標籤 (Tag)：用來標記元素起點與終點的符號。標籤名稱被尖括弧 <> 包圍。
- 起始標籤 (Opening Tag)：例如 <h1>，代表元素的開始。
- 結束標籤 (Closing Tag)：例如 </h1>，在元素名稱前多了一條斜線 /，代表元素的結束。
- 內容 (Content)：位於起始與結束標籤之間的任何東西，可以是文字、圖片，甚至是其他的 HTML 元素。例如 <p>this is a paragraph.</p> 中的 “this is a paragraph.” 就是內容。
- 屬性 (Attribute)：提供關於元素的額外資訊，且必定出現在起始標籤中。屬性以「名稱=值」 (name=”value”) 的成對形式出現，其 attribute name 是屬性名，值建議用雙引號 “” 包圍。例如在 <a> 標籤中，href 屬性定義了連結的網址：<a href=”https://www.google.com”>Google</a>。
巢狀結構 (Nesting)
HTML 文件具有階層式的巢狀結構，意味著元素內部可以包含其他元素。例如，我們可以在段落 <p> 中使用 <strong> 來強調重要文字：
<p>這是一段文字，其中<strong>這幾個字</strong>特別重要。</p>請務必遵守「後進先出」的原則，內層的標籤必須在包圍它的外層父元素標籤閉合前先行閉合。錯誤的寫法如：<p>這是一段文字，<strong>這幾個字</p></strong>，會導致瀏覽器解析錯誤。
空元素 (Empty / Void Element)
部分元素天生就沒有內容，也不需要結束標記，我們稱之為「空元素」。它們通常用來在文件中插入某些物件。常見的空元素包括：
- <img>：插入圖片。
- <br>：強制換行。
- <hr>：插入一條水平分隔線（主題轉換）。
- <input>：表單輸入框。
- <meta>：提供元資訊。
- <link>：連結外部資源。
在 XHTML 規範中，空元素會以自我閉合的方式書寫，如 <br />。雖然在 HTML5 中斜線是可選的，但這也是一種常見且能保持相容性的寫法。
HTML 註解 (Comments)
在程式碼中加入註解是一個好習慣，它可以幫助自己或他人理解程式碼的用途。HTML 的註解語法如下：
註解可以出現在文件中的任何位置，但不能互相巢狀。
HTML 文件的基本骨架
每一個標準的 HTML 文件都擁有一個共通的基礎結構，它確保了瀏覽器能夠正確地解析與渲染頁面。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<title>網頁標題</title>
</head>
<body>
<h1>我的第一個網頁</h1>
<p>這是一個段落。</p>
</body>
</html>
- <!DOCTYPE html>：文件類型宣告 (Document Type Declaration)。它必須是 HTML 文件的第一行。這個簡潔的宣告方式明確告訴瀏覽器，此頁面遵循的是 HTML5 標準。
- <html>：根元素 (root element)，所有其他元素都必須是它的後代。lang 屬性（如 “zh-Hant” 代表繁體中文）有助於搜尋引擎和輔助工具理解網頁的主要語言。
- <head>：網頁的「腦部」，在 html 文檔中包含了所有不直接顯示給使用者看，但對網頁至關重要的元資訊（metadata），例如標題、字元編碼設定、外部 CSS 樣式表和 JavaScript 外部文件的連結等。
- <body>：網頁的「身體」，包含了所有使用者在瀏覽器視窗中能看到或互動的內容，如文字、圖片、影片、連結、表格等。
<head> 內的關鍵標籤：網頁的大腦
<head> 內的標籤掌管了網頁的幕後工作，正確設定它們對於 SEO、社群分享、以及網頁功能都至關重要。
- <title>：定義顯示在瀏覽器分頁標籤、書籤、以及搜尋結果頁面上的標題。這是最重要的 SEO 標籤之一。
- <meta>：提供關於 HTML 文件的元數據，用途極為廣泛。
- <meta charset=”UTF-8″>：聲明頁面的字元編碼為 UTF-8，這是國際通用的標準，能有效避免中文亂碼問題。
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>：行動裝置的顯示設定。width=device-width 讓頁面寬度等於裝置寬度，initial-scale=1.0 則確保頁面以 100% 的比例初始顯示，是響應式網頁設計（RWD）的必備標籤。
- <meta name=”description” content=”這裡寫網頁的簡短描述”>：頁面描述，通常會顯示在搜尋引擎結果的標題下方。
- <link>：用於連結外部資源。最常見的用途是引入 CSS 樣式表：
- <link rel=”stylesheet” href=”main.css”>
- <link rel=”icon” href=”favicon.ico”>：指定顯示在瀏覽器分頁上的小圖示（favicon）。
- <script>：用於嵌入或引用 JavaScript 程式碼。雖然它可以放在 <head> 或 <body> 中，但其載入與執行方式會影響網頁效能。HTML5 為此提供了兩個重要屬性：
- async：非同步模式下載。瀏覽器在下載此腳本時，不會中斷 HTML 的解析。下載完成後會立即執行。適合用於獨立、無依賴性的腳本（如：分析工具）。範例如：<script async src=”common.js”></script>。
- defer：延遲執行。瀏覽器會非同步下載此腳本，但會等到整個 HTML 文件解析完成後，才按順序執行。這是目前推薦的最佳實踐，可以避免腳本阻塞頁面渲染。範例如：<script defer src=”common.js”></script>。
| 載入方式 | HTML 解析 | 腳本下載 | 腳本執行 | 適用情境 |
|---|---|---|---|---|
| 預設 (無屬性) | 暫停 | 同步下載 | 立即執行，執行時解析暫停 | 腳本很小且後續內容依賴它 |
| async | 不暫停 (並行) | 非同步下載 | 下載完畢後立即執行 | 獨立運作、無依賴的腳本 |
| defer | 不暫停 (並行) | 非同步下載 | 待 HTML 解析完畢後執行 | 大多數情況下的最佳選擇 |
<body> 內的內容標籤：建構可見的世界
<body> 內的標籤種類繁多，我們將它們分門別類，以便更好地理解其功能與用途。
語意化結構標籤 (HTML5)
這些 HTML5 新增的標籤讓網頁結構更加清晰、有意義。
- <header>：頁首或標頭。通常包含網站標誌（Logo）、主標題、導航列等。
- <nav>：導航區塊。專門用來放置主要導航連結，如主選單。
- <main>：頁面的主要內容。每個頁面只應有一個 <main> 標籤，它不應包含 header、footer 或側邊欄等重複性內容。
- <footer>：頁尾。通常包含版權資訊、聯絡方式、相關連結等。
- <article>：獨立、完整的內容區塊。適合用來包裝一篇部落格文章、一則新聞報導或一個論壇帖子。
- <section>：文件中的一個獨立區段或主題群組。它可以有自己的標題（<h1>-<h6>）。
- <aside>：側邊欄。用來放置與主要內容關聯性較低，但仍相關的資訊，如廣告、作者簡介、相關連結等。
區塊與分組
- <div>：最通用的區塊級容器（block-level container）。它本身沒有任何語意，主要用於版面配置和分組，是 CSS 和 JavaScript 操作佈局時最常用的元素。在語意化標籤出現前，網頁幾乎由 <div> 構成。
- <span>：最通用的行內容器（inline container）。同樣沒有語意，用於將一小段文字或行內元素包裹起來，以便單獨設定樣式或由 JavaScript 操作，而不會破壞版面結構。
文字與標題
- <h1> 至 <h6>：標題層級。<h1> 是最高層級的標題，重要性最高，<h6> 則最低。請依據內容的結構層次來使用，而非為了調整字體大小。一個頁面通常建議只有一個 <h1>。
- <p>：段落（Paragraph）。用於包裝一段文字，是文章內容最基本的單位。
- <br>：換行。一個空元素，用於在文字中強制換行。
- <hr>：主題分隔線。代表段落層級的主題轉換，在視覺上呈現為一條水平線。
- <blockquote>：區塊引用。用於引用較長的、自成一個或多個段落的外部內容。
- <pre>：預先格式化。此標籤內的文字會保留原始的 white space 和換行符，非常適合用來顯示程式碼片段。
行內文字語意
- <a>：錨點（Anchor），即超链接。
- href 屬性：指定連結的目標 URL。
- target 屬性：_self（預設，在當前分頁開啟）、_blank（在新分頁開啟）。
- 錨點連結：href=”#elementID” 可以讓頁面跳轉到具有相應 id 的元素位置。
- <strong>：表示內容具有高度重要性、嚴肅性或緊急性，瀏覽器通常以粗體顯示。
- <em>：表示強調（Emphasis），瀏覽器通常以斜體顯示。
- <code>：表示一小段程式碼。
- <mark>：用於高亮或標記文字。
- <time>：用於表示特定的日期或時間。
列表 (Lists)
- <ul>：無序列表（Unordered List），項目通常以項目符號（圓點）呈現。
- <ol>：有序列表（Ordered List），項目通常以數字或字母順序呈現。
- <li>：列表項目（List Item），必須作為 <ul> 或 <ol> 的子元素。
- <dl>、<dt>、<dd>：定義列表（Description List）。
- <dl>：定義列表的容器。
- <dt>：定義術語（Term）。
- <dd>：描述或定義該術語。
表格 (Tables)
表格應用於呈現結構化的二維數據。
| 標籤 | 說明 |
|---|---|
| <table> | 表格的根元素容器。 |
| <caption> | 表格的標題，提供表格的總結說明。 |
| <thead> | 表格的頭部區塊，用於放置表頭行。 |
| <tbody> | 表格的主體區塊，用於放置主要的數據行。 |
| <tfoot> | 表格的尾部區塊，用於放置總結或註腳行。 |
| <tr> | 表格的一行 (Table Row)。 |
| <th> | 表格的表頭單元格 (Table Header)，文字預設為粗體並置中。 |
| <td> | 表格的數據單元格 (Table Data)。 |
範例：
<table>
<caption>員工聯絡資訊</caption>
<thead>
<tr>
<th>姓名</th>
<th>部門</th>
<th>分機</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>工程部</td>
<td>123</td>
</tr>
<tr>
<td>小花</td>
<td>設計部</td>
<td>456</td>
</tr>
</tbody>
</table>
嵌入式內容
- <img>：圖片。src 屬性指定圖片路徑，alt 屬性提供替代文字，當圖片無法載入時顯示，對於 SEO 和無障礙性至關重要。
- <figure> 與 <figcaption>：figure 用於包裹獨立的內容（如圖片、圖表、程式碼），figcaption 則為其提供標題或說明。
- <video> 與 <audio>：分別用於嵌入影片和音訊。可使用 controls 屬性來顯示瀏覽器預設的播放控制介面。<source> 標籤可作為其子元素，提供多種格式的媒體檔案以增強瀏覽器相容性。
- <iframe>：內聯框架。用於在當前頁面中嵌入另一個獨立的 HTML 頁面（例如內嵌網頁如 YouTube 影片或 Google Maps）。
- <canvas> 與 <svg>：用於繪圖。<canvas> 主要通過 JavaScript 進行動態的、點陣式的繪圖；<svg> 則用於定義基於 XML 的向量圖。
表單 (Forms)
表單是使用者與網站互動的關鍵，其標籤體系較為龐大。
- <form>：表單的容器。
- <label>：為表單控制項（如 <input>）提供標示。
- <input>：最重要的表單元素，透過 type 屬性可以變換成多種型態，如 text, password, checkbox, radio, submit, file 等。
- <textarea>：多行文字輸入框。
- <button>：按鈕。
- <select> 與 <option>：建立下拉式選單。
特殊字符與已棄用標籤
HTML 轉義字串
若想在網頁上直接顯示 HTML 的保留字元（如 < 或 >），直接輸入會被瀏覽器誤認為標籤。此時必須使用轉義字串（Escape Sequence），以呈現特殊文字：
- < 應寫為 < (less than)
- > 應寫為 > (greater than)
- & 應寫為 & (ampersand)
- ” 應寫為 " (quote)
- (空格) 應寫為 (non-breaking space)
已棄用標籤 (Deprecated Tags)
隨著 CSS 的發展，許多早期用於設定樣式的 HTML 標籤已被棄用，因為它們違反了「內容與樣式分離」的原則。應避免使用這些標籤，改用 CSS 來控制樣式。
- <center>：置中內容。請改用 CSS text-align: center; 或 margin: auto;。
- <font>：設定字體樣式。請改用 CSS font-family, font-size, color 等屬性。
- <marquee>：建立跑馬燈效果。
- <blink>：建立閃爍效果。
常見問題 (FAQ)
Q1: <strong> 和 <b>，<em> 和 <i> 有什麼不同？
A: <strong> 和 <em> 是語意化標籤，而 <b> 和 <i> 則是純粹的樣式標籤。<strong> 代表內容非常重要，<em> 代表需要強調。<b> (bold) 僅表示粗體，<i> (italic) 僅表示斜體，沒有額外的語意。在現代開發中，一個 html tag 的選擇應優先考慮語意，所以建議使用 <strong> 和 <em>，讓樣式交由 CSS 控制。
Q2: 應該將 <script> 標籤放在 <head> 還是 <body> 的結尾？
A: 傳統上，將 <script> 放在 <body> 結尾是為了防止腳本下載和執行時阻塞頁面內容的渲染，提升使用者感知速度。然而，HTML5 的 defer 屬性提供了更好的解決方案。將 <script defer src=”…”></script> 放在 <head> 中，既能讓腳本與頁面內容並行下載，又能確保在 DOM 解析完畢後才執行，是目前推薦的最佳實踐。
Q3: <div> 和 <span> 到底用在哪裡？
A: 當沒有任何語意化 html tags（如 <section>, <article>, <nav> 等）適合用來包裹您的內容時，才使用 <div> 或 <span>。<div> is a 區塊級元素，用於將較大的內容區塊組合在一起以便於 CSS 佈局。<span> 是行內元素，用於包裹一小段文字或行內元素以單獨設定樣式，而不會產生換行。
Q4: 為什麼 alt 屬性在 <img> 標籤中如此重要？
A: alt (alternative text) 屬性至關重要，原因有三：
- 無障礙性：螢幕閱讀器會朗讀 alt 文字，讓視障使用者能理解圖片內容。
- 備用方案：如果圖片因路徑錯誤或網路問題無法載入，瀏覽器會顯示 alt 文字。
- SEO：alt 文字為搜尋引擎提供了關於圖片內容的上下文，有助於圖片搜尋排名。
Q5: HTML5 和早期版本的 HTML 有什麼主要區別？
A: HTML5 帶來了許多重大改進，主要包括：
- 新的語意化元素：如 <article>, <section>, <header>, <footer>, <nav> 等。
- 多媒體支援：內建 <video> 和 <audio> 標籤，無需依賴第三方外掛程式。
- 繪圖功能：新增 <canvas> 和 <svg> 用於網頁繪圖。
- 表單增強：新增了更多 <input> 類型（如 date, email, url）和表單驗證功能。
- 簡化的語法：例如更簡潔的 <!DOCTYPE html> 宣告。
- 新的 API：如 Web Sockets、Web Storage、Geolocation 等，擴充了網頁應用的能力。
總結
HTML 是網頁開發旅程的起點，也是最重要的基礎。掌握其標籤的正確用法與語意，是打造一個結構良好、易於維護、對搜尋引擎和使用者都友善的網站的關鍵。
本文從基礎概念出發，系統性地介紹了 HTML5 的各類核心標籤。我們再次強調，現代網頁開發的核心理念是「關注點分離」：HTML 負責結構，CSS 負責表現，JavaScript 負責行為。請始終將語意化奉為圭臬，優先選擇最能表達內容本質的標籤，而非僅僅為了其預設在瀏覽器中的視覺效果。
網路世界日新月異，持續學習並參考 MDN Web Docs 等權威文件，將是您在前端開發道路上不斷精進的不二法門。
