HTML 是什麼：網頁世界的基石
HTML（HyperText Markup Language，中文常稱「超文字標記語言」）是構築萬維網(World Wide Web)最基本的技術之一。簡而言之，HTML 是一種用來描述網頁內容結構與語意的標記語言，而非程式設計語言。所謂「超文字」，指的是網頁中可以跨越頁面、相互連結的超連結；「標記」則是指我們使用特殊符號（標籤）來標註內容，告訴瀏覽器這段內容該以何種結構或樣式呈現。
換句話說，HTML 負責定義網頁內容的意義和結構。透過 HTML，我們可以將文字、圖片、影片等資訊組織起來，構成一個有章法的頁面。舉例來說，我們可以用 HTML 將一段文字標記為標題、將另一段文字標記為段落、將某個文字片段標記為超連結指向其他頁面，或是嵌入圖像和影音。然而，HTML 並不負責視覺外觀或互動效果——版面的美觀樣式由 CSS (階層樣式表) 處理，動態行為與功能則由 JavaScript 負責。可以這麼說：HTML 是內容與結構，CSS 是外觀呈現，JavaScript 是行為控制。正因如此，HTML 常被譽為網頁的「骨架」或「藍圖」，提供了網站內容的支架與語意基底。
瀏覽器如何解讀 HTML：協同運作的原理
了解了 HTML 是什麼，接下來讓我們看看瀏覽器如何運作 HTML，以及它如何與 CSS、JavaScript 等其他網頁技術協同合作。當你在瀏覽器中輸入一個網址並載入頁面時，其背後發生的大致流程如下：
- 載入 HTML：瀏覽器向伺服器請求該網頁的 HTML 檔案，取得一串由文字與標籤組成的內容。
- 解析與構建結構：瀏覽器開始從上到下解析 HTML。在這個過程中，HTML 的標籤逐一被解析，瀏覽器據此構建出一棵網頁的結構樹，稱為 DOM（Document Object Model，文件物件模型）。可以想像 DOM 就是瀏覽器內部對於網頁結構的表示：每個 HTML 元素（標題、段落、圖像等）都成為這棵樹中的一個節點，呈現出父子嵌套的階層關係。
- 協同 CSS：當瀏覽器解析 HTML 時，若遇到引用的 CSS（例如在 <head> 中的外部樣式連結 <link>，或行內的 <style> 標籤），會同時載入並解析 CSS。CSS 解析後會形成另一棵 CSSOM 樹（CSS Object Model），描述各個元素的樣式規則。接著瀏覽器將 DOM 與 CSSOM 結合，計算出每個 DOM 元素應有的樣式和版面位置，產生渲染用的結構。
- 協同 JavaScript：同樣地，HTML 中若包含了 JavaScript 程式碼（例如 <script> 標籤）或外部腳本檔案，瀏覽器會在適當的時機載入並執行它們。JavaScript 可以透過程式碼動態操作 DOM 樹（新增、修改或移除元素），從而改變頁面內容或樣式，增強互動性。
- 呈現頁面：經過以上步驟，瀏覽器已經將 HTML 結構、CSS 樣式和 JavaScript 行為整合起來，最後一步就是將結果渲染到螢幕上。你所看到的完整網頁畫面，便是瀏覽器根據組合後的結構與樣式繪製出的結果。
透過上述流程可以看出，HTML、CSS 和 JavaScript 各司其職、緊密合作：HTML 提供內容與語意結構，CSS 控制視覺呈現效果，而 JavaScript 則賦予網頁生命力般的互動功能。就好比建造一棟房子，HTML 是堅實的建築骨架，CSS 是精美的室內外裝潢，JavaScript 則是讓房子「活」起來的電力與設備系統（控制門窗、自動化裝置等）。沒有骨架，裝潢無處依附；沒有裝潢，骨架顯得粗糙單調；沒有互動功能，房子則缺少了靈動性。只有三者緊密配合，才能共同構築出豐富多彩的網頁體驗。
HTML 文件的基本結構
一個完整的 HTML 檔案有其固定的結構骨架。即使是最簡單的網頁，我們也需要包括必要的元素來讓瀏覽器正確解析與顯示內容。以下是一個基本的 HTML 文件結構範例：
<!DOCTYPE html> <!-- 告知瀏覽器此文件使用 HTML5 標準 --> <html> <head> <meta charset="UTF-8"> <!-- 設定字元編碼，避免出現亂碼 --> <title>我的第一個網頁</title> <!-- 定義網頁標題（將顯示在瀏覽器標籤上） --> </head> <body> <h1>歡迎來到我的網站</h1> <!-- 主標題內容 --> <p>這是一個段落，用來介紹網站的內容。</p> <!-- 一般段落文字 --> </body> </html>
讓我們逐步剖析上述結構：
- <!DOCTYPE html>：文件型別宣告，告訴瀏覽器這是一個 HTML5 文件。雖然我們看不到任何直接輸出效果，但這行一定要放在檔案最開頭，確保瀏覽器以標準模式來解析現代 HTML，而非相容舊模式。
- <html>...</html>：HTML 根元素，所有網頁內容都包裹在這對標籤內。它也被稱為「文件根節點」。
- <head>...</head>：文件頭部，用於包含對瀏覽者不可見的資訊或設定。例如：
- <meta charset="UTF-8"> 用於聲明網頁使用的字元編碼（UTF-8 是通用且建議使用的編碼，可支援多國語言字符）。
- <title>...</title> 定義了頁面的標題，會顯示在瀏覽器視窗的標籤頁上，供使用者辨識當前頁面。
- 此外，<head> 中經常還會包含 CSS 的連結、JavaScript 的引用、SEO 有關的關鍵字與描述（使用 <meta> 標籤）等資訊。
- <body>...</body>：文件主體，包含了所有要呈現給瀏覽者看的可見內容。不論文字、圖片、影片、清單、按鈕，通通都放在 <body> 裡。在以上範例中，<body> 內我們放入了一個主標題 <h1> 和一個段落 <p> 作為示範。
透過這個骨架範例可以看出，一個網頁文件主要區分為頭部資訊 (head) 與主體內容 (body) 兩大部分。只要掌握這樣的基本結構，你就可以開始建立屬於自己的網頁了。
HTML 標籤、元素與屬性：構成網頁的語法單位
HTML 使用標籤來標記內容，而由標籤所包圍的區塊就形成一個元素。大多數 HTML 元素由一對起始和結束標籤組成，例如上述範例中的 <h1>...</h1> 或 <p>...</p>，中間包夾的就是元素的內容。也有些元素是自閉合的，沒有明確的結束標籤，例如 <img> 圖像元素或 <br> 換行元素——它們在一個標籤內就能完整表達內容。下面，我們將介紹幾個常見的 HTML 元素，以及它們的標籤與屬性用法：
<p> 用於段落文字，而 <h1> 至 <h6> 用於標題(數字愈小代表級別愈高的標題)。段落和標題元素可以將長篇文字內容有條理地分段、分級展示。例如上一節程式碼中的 <h1> 表示主標題，<p> 表示一般段落。
使用 <a> 元素建立超連結。<a> 通常需要搭配 href 屬性來指定目標網址。例如，要插入一個指向其他網站的連結，可以這樣寫：
<p>更多資訊請參考 <a href="https://www.example.com" target="_blank">範例網站</a>。</p>
上例中，<a> 標籤將文字"範例網站"標記為一個超連結，點擊後會開啟指定的網址。href 屬性提供連結目標URL；target="_blank" 則是可選屬性，表示在新分頁打開連結（避免導致當前頁面離開）。
使用 <img> 元素嵌入圖像。<img> 是自閉合元素，需要用 src 屬性提供圖像檔的路徑或網址，用 alt 屬性提供替代文字（當圖像無法載入時顯示，或供給視障者的讀屏軟體使用）。例如：
<img src="picture.webp" alt="網站首頁示意圖">
使用 <table> 元素可以建立表格結構，搭配 <tr> 表示表格列、<td> 表示一般儲存格、<th> 表示表頭儲存格。舉例來說，下方的程式碼建立了一個簡單的兩列三行表格：
<table>
<tr>
<th>產品名稱</th>
<th>價格</th>
</tr>
<tr>
<td>蘋果</td>
<td>$1</td>
</tr>
<tr>
<td>香蕉</td>
<td>$2</td>
</tr>
</table>
上述表格有一列表頭（名稱與價格），以及兩列資料列，呈現了兩項產品的名稱與價格。瀏覽器會按照這種列、欄結構將內容排成網格式的表格。
以上只是 HTML 提供的眾多元素中的一部分。實際上，HTML 元素種類非常豐富，還有清單列表（<ul> 無序清單，<ol> 有序清單，內含 <li> 列表項）、表單相關元素 (<form>、<input>、<button> 等)、區塊容器 (<div>)、行內容器 (<span>)，以及音訊、影片、多媒體等專用標籤。不過，不管元素多麼繁複，都遵循相似的語法結構：使用語意明確的標籤來包圍內容，並透過屬性提供附加資訊或設定。
- 巢狀結構：HTML 元素可以相互巢狀（例如一個段落內可以有加粗文字 <strong>、斜體文字 <em> 或連結 <a>）。巢狀關係必須正確對應，後開啟的標籤應先閉合（類似於括號配對的概念），以維持文件的結構完整性。
- 大小寫與格式：HTML 標籤名對大小寫不敏感，<P> 與 <p> 作用相同，但慣例上我們使用小寫字母來撰寫標籤，以提高可讀性與一致性。此外，良好的縮排排版有助於呈現元素的階層關係，雖然瀏覽器忽略程式碼中的空白和換行，但乾淨的格式能讓開發者更容易維護程式碼。
- 屬性的用法：大多數屬性以 名稱="值" 的形式附加在開啟標籤上。一個標籤可以定義多個屬性，彼此以空格分隔。例如 <a href="URL" target="_blank"> 一次設置了兩個屬性。注意屬性值通常需要用引號包起來，尤其當值中有空格時更是如此。
HTML 的語意角色：讓內容更有意義
除了構建網頁的外在結構，HTML 還承擔著定義內容「語意」（Semantics）的重任。所謂語意，即內容所代表的意義和角色。例如，我們以 <h1> 標記文字，是在表明「這是一個最高層級的標題」；以 <nav> 包裹區塊，是在宣告「這是一個導航菜單區域」。語意化 HTML 指的就是使用正確的元素來表達正確的內容用途，讓網頁結構對人和機器都更具可理解性。
早期的 HTML 元素相對有限，開發者經常使用大量無語意的容器（如 <div> 或 <span>）搭配 CSS 來排版，或者使用像 <b>、<i> 這樣主要表現樣式效果的標籤來加粗或傾斜文字。這樣做雖然能產生想要的視覺結果，但語意上並沒有告訴瀏覽器或讀者「為什麼要加粗這段文字」——究竟它是標題？重要的警示？還是僅僅為了突出幾個詞？
為了解決這些問題，HTML5 引入了許多語意化元素（Semantic Elements）。以下是幾個重要的例子：
- <header>：頁首區域，通常包含網站的標誌、主標題或導航。
- <nav>：導航區塊，內含一組連結，通常用於主選單。
- <article>：文章內容，代表一則獨立的可獨立分發或重複使用的內容，如文章、博客貼文、論壇發帖。
- <section>：區段，表示文檔中的一個主題板塊（通常帶有標題）。
- <aside>：側邊欄或附屬資訊，與主要內容相關但次要的部分，例如側邊的提示框、相關連結列表。
- <footer>：頁尾區域，通常包含版權資訊、聯絡方式等頁面底部內容。
- <figure> 和 <figcaption>：用於圖像或插圖及其說明文字的組合，讓整組內容具備語意上的關聯。
- <main>：頁面主要內容區域，代表文件主題相關的主要資訊，在一個頁面中應該只有一個 <main>。
- 可讀性與維護性：對開發者而言，語意明確的結構使程式碼更易讀、更易於維護。看到 <nav> 就知道是一組導航連結，看到 <article> 就知道那是一篇獨立內容，遠比一堆泛泛的 <div> 更直觀。團隊協作時，新成員也能更快理解前人寫的結構。
- 瀏覽器與 SEO：對瀏覽器和搜尋引擎而言，語意化的標記讓它們更準確地理解你的內容結構。例如，搜尋引擎爬蟲會優先看重標題（如 <h1>）所包含的關鍵字，這有助於 SEO（搜尋引擎最佳化）。使用正確的語意標籤可以提升網頁在搜尋結果中的表現，因為你的內容對爬蟲來說更有意義、更容易被索引。
- 無障礙體驗：對於使用輔助技術的用戶（例如視障者使用的螢幕閱讀軟體）而言，語意良好的 HTML 提升了無障礙體驗。螢幕閱讀器可以根據語意結構來提供更好的導覽，例如快速跳到主內容(<main>)、逐段跳閱標題(<h2>,<h3>等)，或者辨識出導航菜單(<nav>)和表格的表頭(<th>)。這些都讓不同需求的使用者更容易理解和操作你的網站。
總而言之，HTML 不僅要「寫得對」，還要「寫得明白」。當我們在編寫 HTML 時，應盡量選用能準確表達內容意義的標籤，而非單純為了版面效果亂用元素。例如，需要一個按鈕時，就應該使用 <button> 元素而非用帶有某些樣式的 <div> 去偽裝；需要突出重要句子時，使用 <strong>（語意為「強調、重要」）優於僅使用 <span> 加粗樣式。這種語意化的思維，能讓我們的網頁對「人」更友善、對「機器」更透明。
值得一提的是，並非所有情況下都有對應的語意標籤。如果找不到符合語意的特定元素，<div>（區塊容器）和 <span>（行內容器）依然可以派上用場。只是在使用它們時，我們心中要明白：這麼做只是因為沒有更語意化的選項，而非懶於思考結構。良好的HTML語意標記，是網頁前端開發的最佳實踐之一，長遠來看會讓你的網站在維護性、擴充性以及使用體驗上都獲益匪淺。
常見問與答
結語
透過本篇教學，我們從原理層面剖析了 HTML 作為超文字標記語言的本質與運作方式。我們了解了 HTML 如何充當網頁內容的骨架，與瀏覽器以及 CSS、JavaScript 分工合作地呈現豐富的網站；我們也學會了 HTML 文件的基本架構、各種元素標籤與屬性的用法，並認識了語意化標記對於提升網頁品質的重要性。
當你掌握了這些概念後，再回頭編寫 HTML，會發現自己對於每一個標籤的選擇與用途都有了更深刻的理解。HTML 的奧祕其實並不神祕：在於用對的元素做對的事，層層構築出有意義的內容結構。希望這篇文章能引導你融會貫通 HTML 的核心知識，在未來的網頁開發之路上如虎添翼！
