HTML 是網頁的骨幹，也是踏入前端開發的第一塊基石。想快速學會 HTML，最有效的方式不是死背標籤，而是「邊做邊學」：每學一個觀念，立刻複製範例、存成 .html 檔、用瀏覽器打開看結果。本文依照這個原則設計，每一章都附上可以直接複製、存檔就能執行的完整範例，跟著做完全部章節，您就能獨立寫出一個結構正確、符合搜尋引擎標準的網頁。
本篇目錄
最快的 HTML 學習路線圖與方法
如果您的目標是「最短時間內能動手做網頁」，照著本文的章節順序走，總時數約 6～10 小時就能完成第一個作品。以下是建議的學習路線與時間配置：
| 階段 | 對應內容 | 學習重點 | 建議時間 |
|---|---|---|---|
| 第 1 步 | 認識 HTML 與第一個網頁 | 理解 HTML 角色、跑起您的第一個網頁 | 30 分鐘 |
| 第 2 步 | 文字排版與圖片連結 | 文字、標題、圖片、連結，涵蓋網頁 80% 的內容 | 2 小時 |
| 第 3 步 | 區塊與行內元素 | 容器觀念，是未來學 CSS 排版的地基 | 1 小時 |
| 第 4 步 | 列表、表格與表單 | 資料呈現與使用者互動的三種結構 | 2 小時 |
| 第 5 步 | 語意化標籤與 SEO 檢核 | HTML5 語意化與 SEO 基礎設定 | 2 小時 |
| 驗收 | 個人介紹網頁實戰 | 整合所有觀念，做出一頁完整作品 | 1～2 小時 |
學習方法三原則
- 不要用看的，要用做的 每個範例都複製下來、存檔、開瀏覽器。眼睛看十次，不如手打一次。實際操作過的觀念才會真正留在腦中，也才能在出錯時知道去哪裡找問題。
- 改壞它 把範例的標籤刪掉、改掉，觀察畫面會發生什麼事，是理解 HTML 最快的方式。當您知道「拿掉這個標籤畫面會怎樣」，就等於理解了它的功能。
- 遇到不懂的標籤先跳過 HTML 標籤超過 100 個，常用的不到 30 個。先掌握本文的核心標籤就夠了，其餘的等實際需要時再查詢即可。
HTML 是什麼？網頁設計的骨骼
HTML 的全名是 HyperText Markup Language（超文本標記語言），它的工作是告訴瀏覽器：網頁上的內容「是什麼」。在開始寫程式碼之前，必須先理解 HTML 在網頁世界中的角色。如果不理解它的本質，就像蓋房子不懂打地基，蓋出來的網站既脆弱又難以被搜尋引擎理解。
什麼是 HTML？
請注意，HTML 不是一般的程式語言（Programming Language），而是一種標記語言。它不像 Python 或 Java 需要處理複雜的邏輯運算，HTML 的工作非常單純且專注：為網頁內容「貼上標籤」，讓瀏覽器與搜尋引擎知道哪一段是標題、哪一段是內文、哪裡是圖片。
網頁開發鐵三角：HTML、CSS 與 JavaScript
要讓一個現代網站運作，通常需要三種技術分工合作。我們可以用「蓋房子」來比喻：
HTML：骨骼與結構
像房子的樑柱與牆面，決定網頁有哪些內容。沒有 HTML，網頁就是一片空白。
CSS：皮膚與裝潢
像牆壁顏色與傢俱擺設，決定顏色、字體、版面排列。沒有 CSS，網頁像一份純文字文件。
JavaScript：肌肉與大腦
像屋內的電器與開關，負責互動與功能。例如點擊按鈕彈出視窗、送出表單。
本文聚焦於 HTML 這塊地基；打好基礎後，可依序閱讀 CSS 入門教學與 JavaScript 語法教學，補齊網頁開發的另外兩塊拼圖。
為什麼 SEO 重視 HTML？
SEO 工程師的提醒：Google 爬蟲（Bot）看網頁的方式，就是閱讀 HTML 程式碼。如果您的 HTML 結構混亂、標籤亂用，例如把內文標示為標題，搜尋引擎就會「看不懂」您的網站重點，導致排名低落。在 AI 搜尋時代，ChatGPT、Perplexity 與 Google AI Overviews 這類工具同樣依賴乾淨的 HTML 結構來理解與引用網頁內容。因此，寫出標準、乾淨的 HTML，就是 SEO 優化的第一步。
10 分鐘跑起您的第一個網頁
一個標準的 HTML 檔案有固定的「樣板結構」（Boilerplate），就像公文有固定的格式。這一章的目標很簡單：讓您在 10 分鐘內，於瀏覽器看到自己寫的網頁。
準備工具（免費）
您不需要昂貴的軟體，微軟內建的記事本也能寫 HTML，但強烈建議使用 VS Code（Visual Studio Code）這類免費的專業編輯器，它有自動補齊與語法上色功能，能大幅降低打錯字的機率。
完整範例：您的第一個網頁
操作步驟：複製以下全部程式碼，貼到編輯器，存檔為 index.html，再對檔案點兩下用瀏覽器打開。
HTML
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個網頁</title>
</head>
<body>
<h1>哈囉！您好，HTML！</h1>
<p>這是我建立的第一個網頁內容。</p>
</body>
</html>
看到畫面上出現大標題了嗎？恭喜，您已經是「會寫網頁的人」了。
程式碼逐行解析
這段程式碼分為幾個關鍵部分，缺一不可：
<!DOCTYPE html>：這不是標籤，而是「聲明」。它告訴瀏覽器：「我使用的是最新的 HTML5 標準。」<html lang="zh-Hant-TW">：根元素，包住所有內容。lang屬性非常重要，它告訴瀏覽器與搜尋引擎這是「繁體中文（台灣）」的網頁，有助於在地化 SEO。<head>（頭部）：放的是給瀏覽器和搜尋引擎看的資訊，使用者在畫面上看不到。包含網頁標題（title）、編碼設定（charset）等。<body>（身體）：放的是給使用者看的內容。您在瀏覽器視窗中看到的所有文字、圖片、影片，全部都寫在這裡。
練習：把
<title> 裡的文字改成您的名字，存檔後重新整理瀏覽器，觀察瀏覽器分頁標籤的變化。
掌握文字排版：標題、段落與強調
文字是網頁資訊傳遞的核心，而每一種文字標籤都有它的「語意」（Semantic），不應該只為了「讓字變大」而使用標題標籤。這一章帶您掌握標題階層、段落與強調標籤的正確用法。
完整範例：文字排版練習頁
複製存檔為 text.html，打開後對照程式碼與畫面：
HTML
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字排版練習</title>
</head>
<body>
<h1>網頁主標題（一頁只能有一個 H1）</h1>
<h2>第一個章節標題</h2>
<p>這是一個段落。瀏覽器會在段落上下自動留出空白間距，讓閱讀更舒適。</p>
<p>這是第二個段落，其中有<strong>非常重要的重點文字</strong>，
也有<b>純粹視覺上的粗體</b>。</p>
<h2>第二個章節標題</h2>
<h3>章節底下的小節</h3>
<p>詩詞或地址這種需要緊密換行的內容，才使用 br 標籤：</p>
<p>
台中市西區台灣大道二段000號<br>
新視野網頁設計
</p>
</body>
</html>
標題標籤（Heading Tags）：H1 至 H6
HTML 提供六個等級的標題，從 <h1>（最大、最重要）到 <h6>（最小、最不重要）。SEO 關鍵心法有兩條：
- H1 是王牌：一個頁面只能有一個 H1，通常用在文章的主標題。搜尋引擎會將 H1 視為該頁面最核心的主題。
- 階層要分明：不要跳著用。正確順序是 H1、H2、H3，不要因為覺得 H3 的字體大小比較剛好，就跳過 H2 直接用 H3。
段落（Paragraph）與換行
<p>：定義一個段落，瀏覽器會自動加上段落間距。<br>：強制換行標籤。正確用法是詩詞、地址這類需要緊密換行的內容；錯誤用法是連用多個<br>製造段落距離，這種情況請改用 CSS 的 margin。
重要的強調標籤：Strong 與 B 的差異
這兩個標籤在視覺上都會讓字體變粗，但在 SEO 眼中意義完全不同：
| 標籤 | 語法 | 視覺效果 | SEO 與語意意義 |
|---|---|---|---|
| Strong | <strong>重點</strong> |
粗體 | 強烈語氣強調，告訴搜尋引擎這裡的文字「非常重要」。 |
| Bold | <b>文字</b> |
粗體 | 純粹視覺上的粗體，沒有語氣上的強調意義。 |
專家建議：撰寫教學文章或強調關鍵字時，請優先使用
<strong>，這有助於搜尋引擎抓取文章重點。
豐富您的網頁：圖片與超連結
圖片吸引目光、連結引導動線，兩者是讓使用者願意停留的關鍵，也是搜尋引擎判斷網頁內容豐富度與關聯性的重要指標。純文字的網頁太枯燥了，這一章帶您把圖片與連結正確地放進網頁。
完整範例：圖片與連結練習頁
複製存檔為 media.html，範例使用線上示意圖網址，存檔即可直接看到效果：
HTML
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖片與連結練習</title>
</head>
<body>
<h1>圖片與超連結</h1>
<h2 id="img-demo">圖片示範</h2>
<img src="https://placehold.co/500x300" alt="灰色示意圖：500 乘 300 像素" width="500">
<h2 id="link-demo">連結示範</h2>
<p>外部連結：<a href="https://www.google.com" target="_blank" rel="noopener">前往 Google（開新分頁）</a></p>
<p>站內連結：<a href="index.html">回到我的第一個網頁</a></p>
<p>錨點連結：<a href="#img-demo">跳回上方的圖片示範</a></p>
</body>
</html>
圖片標籤 img
圖片標籤是一個「單標籤」（Self-closing tag），不需要結束標籤，因為它不包含文字內容。
src（Source）：圖片的路徑。絕對路徑是完整的網址，如https://www.example.com/pic.jpg；相對路徑是圖片相對於 HTML 檔案的位置，如images/pic.jpg，推薦用於網站內部圖片。width與height：設定圖片寬高。建議設定其中一個數值即可，以免圖片比例變形。
SEO 資深工程師的叮嚀：Alt 屬性是關鍵。
alt（Alternative Text，替代文字）是很多新手會忽略、但 SEO 專家最重視的屬性：第一，視障人士使用螢幕閱讀器時，機器會唸出 alt 的內容，是無障礙瀏覽的基礎；第二，爬蟲看不懂圖片畫面，它讀的是 alt，想讓圖片出現在圖片搜尋結果中，alt 必須精準描述圖片內容，寫「紅色法拉利跑車」優於「車子」或「IMG_001」；第三，網路太慢圖片跑不出來時，網頁會顯示這段文字作為備案。
超連結 a：網路世界的橋樑
WWW（World Wide Web）的核心就是連結。
href（Hypertext Reference）：指定連結要去的地方。target="_blank"：在新分頁開啟連結，保留原本的頁面。搭配rel="noopener"使用更安全。
錨點連結（Anchor Link）是點擊「目錄」就自動滑到該章節的功能，做法只有兩步：
-
先給目標設定 ID
在目標元素加上 id 屬性，例如
<h2 id="section1">第一章</h2>。 -
連結指向該 ID
在連結的 href 前加上井字號，例如
<a href="#section1">跳到第一章</a>，點擊後頁面就會滑動到目標位置。
容器的概念：區塊元素與行內元素
HTML 標籤天生分為「區塊元素」與「行內元素」兩大類，它們在網頁上的「佔地盤」方式完全不同。這是初學者最容易卡關，卻也是未來學 CSS 排版最重要的觀念。
完整範例：親眼看出兩者差異
複製存檔為 block-inline.html，範例加了背景色，讓您一眼看出佔位差異：
HTML
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>區塊與行內元素</title>
</head>
<body>
<h1>區塊 vs 行內</h1>
<div style="background:#ffe0e0;">我是 div（區塊元素），佔滿整行</div>
<div style="background:#ffd0d0;">我也是 div，自動換到下一行</div>
<p>
這一段裡有 <span style="background:#d0e8ff;">span（行內元素）</span>
和 <a href="#">連結</a>，它們都
<span style="background:#d0ffd0;">乖乖排在同一行</span>，不會換行。
</p>
</body>
</html>
區塊元素（Block Elements）
- 特性：霸道。無論內容多少，預設都會佔滿整整一行，並且自動換行。
- 常見標籤：
<h1>至<h6>、<p>、<div>、<ul>、<li>。 - 用途：作為網頁的「骨架」或「容器」，劃分版面區域。
行內元素（Inline Elements）
- 特性：隨和。內容有多少就佔多少空間，不會自動換行，會跟其他文字並排。
- 常見標籤：
<a>、<span>、<img>、<strong>。 - 用途：修飾文字或作為段落中的小元件。
無語意容器雙雄：Div 與 Span
有兩個標籤本身沒有任何特殊意義，純粹是為了「包裝內容」以便用 CSS 設定樣式：
| 標籤 | 類型 | 用途 |
|---|---|---|
<div> |
Block（區塊） | 網頁排版的主力。例如包住頁首、側邊欄、文章區塊。 |
<span> |
Inline（行內） | 文字樣式微調。例如把段落中的某兩個字變成紅色。 |
-
常見錯誤：把區塊元素塞進行內容器或 p 裡面
錯誤寫法：
<p>這是一段文字<div>插進來的區塊</div></p>。瀏覽器解析時會強制把段落拆開，導致結構混亂。正確寫法：<div><p>文字段落</p><div>另一個區塊</div></div>，讓區塊包區塊、段落只放文字與行內元素。
資料呈現與互動：列表、表格與表單
網頁不只是展示文章，還需要整理數據（表格）和收集使用者資訊（表單）。這一章用一個三合一範例，一次看懂列表、表格、表單三種結構。
完整範例：三合一練習頁
複製存檔為 data.html：
HTML
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表、表格與表單</title>
</head>
<body>
<h1>資料呈現與互動</h1>
<h2>無序列表（導覽選單的骨架）</h2>
<ul>
<li>首頁</li>
<li>關於我們</li>
<li>產品介紹</li>
</ul>
<h2>有序列表（步驟教學）</h2>
<ol>
<li>複製範例程式碼</li>
<li>存檔為 .html</li>
<li>用瀏覽器打開</li>
</ol>
<h2>表格（呈現數據）</h2>
<table border="1">
<tr>
<th>方案</th>
<th>價格</th>
</tr>
<tr>
<td>基本版</td>
<td>免費</td>
</tr>
<tr>
<td>專業版</td>
<td>NT$ 990／月</td>
</tr>
</table>
<h2>表單（與使用者互動）</h2>
<form action="/submit-data" method="POST">
<label for="username">姓名：</label>
<input type="text" id="username" name="user_name" placeholder="請輸入姓名">
<br><br>
<label for="email">信箱：</label>
<input type="email" id="email" name="user_email">
<br><br>
<button type="submit">送出資料</button>
</form>
</body>
</html>
列表系統（Lists）
幾乎所有網站的導覽列（Menu），骨子裡都是「無序列表」。
<ul>（Unordered List）無序列表：預設前方會有小黑點，用於選單、條列重點。<ol>（Ordered List）有序列表：預設前方有 1、2、3 的數字排序，適合步驟教學。
表格結構 table
早期的網頁設計會用表格來排版，這是應該淘汰的舊做法，現在表格只應該用來呈現數據。
<table>：表格容器。<tr>（Table Row）：橫的一列。<th>（Table Header）：標題儲存格，文字自動加粗置中。<td>（Table Data）：一般的資料儲存格。
表單基礎 form
表單是網頁與使用者互動的介面，例如登入、註冊、搜尋框。
<input>：最多變的標籤。透過type屬性可以變成文字框（text）、密碼框（password）、單選圓鈕（radio）或核取方塊（checkbox）。<label>：透過for屬性綁定輸入框的id，點擊文字也能聚焦到輸入框，對手機使用者非常友善。
進階必學：HTML5 語意化標籤
語意化就是「用對的標籤做對的事」，寫出機器讀得懂的結構，是 AI 搜尋時代 SEO 的決勝關鍵。如果您打開早年的網站原始碼，會看到滿滿的 <div>；在 HTML5 時代，這種寫法已經被語意化標籤取代。
什麼是「語意化」？
- 沒有語意：
<div>和<span>。它們只告訴瀏覽器「這裡是一個區塊」，但沒說這個區塊是做什麼的。 - 有語意：
<header>、<footer>、<article>。它們清楚定義了內容的目的。
搜尋引擎的爬蟲是機器人。當它看到 <nav>，立刻知道「這是導覽列，很重要」；看到 <footer>，它知道「這是版權宣告，權重較低」。語意化標籤能幫助搜尋引擎與 AI 搜尋工具更精準地索引您的網頁內容。
核心語意標籤詳解
<header>（頁首）：通常包含網站 LOGO、搜尋框或導覽列。<nav>（導覽列）：放置主要的連結選單，搜尋引擎會極度重視這裡的連結。<main>（主要內容）：每個頁面只能有一個<main>，是網頁的核心區域，不包含側邊欄或頁首頁尾。<article>（文章）：獨立、完整的內容區塊。判斷標準：如果把這塊內容單獨拿出來放在別的地方，語意依然完整嗎？如果是，就用<article>。<section>（區塊）：具有特定主題的內容群組，通常包含一個標題（h2 至 h6）。<aside>（側邊欄）：與主要內容有間接關係的區塊，例如相關文章推薦、作者簡介。<footer>（頁尾）：版權宣告、聯絡資訊、Sitemap 連結。
完整範例：語意化網頁骨架
複製存檔為 semantic.html，這就是現代網站的標準骨架，可直接當作您未來所有專案的起手式：
HTML
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>語意化網頁骨架範本</title>
</head>
<body>
<header>
<h1>網站名稱 LOGO</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">服務項目</a></li>
<li><a href="#">聯絡我們</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章標題</h2>
<p>這裡是文章的主要內容……</p>
<section>
<h3>文章的第一個小節</h3>
<p>小節內容……</p>
</section>
</article>
<aside>
<h3>相關文章推薦</h3>
<ul>
<li><a href="#">延伸閱讀一</a></li>
<li><a href="#">延伸閱讀二</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 我的網站｜聯絡信箱：hello@example.com</p>
</footer>
</body>
</html>
舊式寫法（Div Soup）與語意化寫法的差別，一眼就能看出來：
HTML
<!-- 舊式：搜尋引擎看不出區塊的意義 --> <div class="header">...</div> <div class="content">...</div> <div class="footer">...</div> <!-- 語意化：結構一目了然，SEO 友善 --> <header>...</header> <main>...</main> <footer>...</footer>
SEO 工程師的 HTML 優化檢核表
網站上線前，資深工程師都會拿出一張 Check List 做最後確認。這不僅是為了程式碼整潔，更是為了讓搜尋引擎與 AI 搜尋工具正確理解您的網站。
TDK 三劍客設定
雖然現在 Keywords 的權重已降低，但 Title 和 Description 依然是 SEO 的靈魂：
<title>：確保每個頁面都有獨一無二的標題，並且包含關鍵字。- Description（
<meta name="description">）：搜尋結果頁（SERP）標題下方的小字，直接影響使用者的點擊率（CTR）。
Open Graph（OG）社群標籤
網址貼到 LINE 或 Facebook 時會變成漂亮的圖文卡片，就是因為設定了 OG 標籤，這能大幅增加網頁在社群媒體上的曝光效果。對台灣中小企業來說，LINE 分享卡片的完整度直接影響顧客點擊意願，是不能省略的基本設定。
完整範例：SEO-Ready 的 head 範本
以下是一份可直接複製套用的完整 <head> 範本，把內容換成您自己的即可：
HTML
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<!-- 基本設定 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO：TDK -->
<title>頁面標題｜品牌名稱（建議 30 字以內）</title>
<meta name="description" content="用 80～110 個字描述這一頁的內容重點，會顯示在搜尋結果，直接影響點擊率。">
<!-- SEO：標準網址（避免重複內容） -->
<link rel="canonical" href="https://www.example.com/this-page.html">
<!-- 社群分享：Open Graph -->
<meta property="og:title" content="文章標題">
<meta property="og:description" content="文章簡介">
<meta property="og:image" content="https://www.example.com/cover.jpg">
<meta property="og:url" content="https://www.example.com/this-page.html">
<meta property="og:type" content="article">
</head>
<body>
<!-- 網頁內容 -->
</body>
</html>
程式碼整潔度（Code Hygiene）
- 縮排（Indentation）：保持一致的縮排，通常是 2 或 4 個空白鍵，結構一目了然。
- 註解（Comments）：在複雜區塊加上
<!-- 註解 -->，方便日後維護。 - 避免過度巢狀（Nested Hell）：不要寫出
<div><div><div>這種深不見底的結構，會拖慢讀取速度。
延伸學習：HTML 檢核表只是網站優化的起點。標題怎麼下、內容怎麼規劃、關鍵字怎麼佈局，可以參考完整的 SEO 教學指南，從結構走向排名策略。
完整實戰：做出您的個人介紹網頁
學完前面的章節，是時候驗收了。以下是一份整合所有觀念的完整網頁：語意化架構、TDK、圖片 alt、錨點目錄、表格、表單全部到位。複製存檔為 about-me.html，把內容換成您自己的，您的第一個作品就完成了。
HTML
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王小明的個人網頁｜前端學習中</title>
<meta name="description" content="王小明的個人介紹網頁：自學 HTML 的第一個完整作品，包含自我介紹、學習歷程與聯絡表單。">
<meta property="og:title" content="王小明的個人網頁">
<meta property="og:description" content="自學 HTML 的第一個完整作品。">
<meta property="og:image" content="https://placehold.co/1200x630">
</head>
<body>
<header>
<h1>王小明的個人網頁</h1>
<nav>
<ul>
<li><a href="#about">關於我</a></li>
<li><a href="#skills">學習歷程</a></li>
<li><a href="#contact">聯絡我</a></li>
</ul>
</nav>
</header>
<main>
<article>
<section id="about">
<h2>關於我</h2>
<img src="https://placehold.co/300x300" alt="王小明的個人照片" width="300">
<p>大家好，我是<strong>王小明</strong>，目前正在自學網頁開發。
這是我用純 HTML 完成的第一個網頁作品。</p>
<p>我的學習目標依序是：</p>
<ol>
<li>HTML：網頁結構（本頁作品）</li>
<li>CSS：外觀與排版</li>
<li>JavaScript：互動功能</li>
</ol>
</section>
<section id="skills">
<h2>學習歷程</h2>
<table border="1">
<tr>
<th>時間</th>
<th>學習內容</th>
<th>狀態</th>
</tr>
<tr>
<td>第 1 週</td>
<td>HTML 基礎語法與語意化標籤</td>
<td>完成</td>
</tr>
<tr>
<td>第 2 週</td>
<td>CSS 選擇器與盒模型</td>
<td>進行中</td>
</tr>
</table>
</section>
<section id="contact">
<h2>聯絡我</h2>
<form action="/submit" method="POST">
<label for="name">您的姓名：</label>
<input type="text" id="name" name="name" placeholder="請輸入姓名">
<br><br>
<label for="mail">您的信箱：</label>
<input type="email" id="mail" name="mail" placeholder="name@example.com">
<br><br>
<label for="msg">想說的話：</label>
<br>
<textarea id="msg" name="msg" rows="4" cols="40" placeholder="留言給我吧"></textarea>
<br><br>
<button type="submit">送出留言</button>
</form>
</section>
</article>
<aside>
<h3>我的學習資源</h3>
<ul>
<li><a href="https://developer.mozilla.org/zh-TW/" target="_blank" rel="noopener">MDN Web Docs</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 王小明｜<a href="#about">回到頂部</a></p>
</footer>
</body>
</html>
下一步：這個頁面現在看起來很陽春，因為它只有「骨架」。下一階段學習 CSS，您就能為它加上顏色、字體與版面設計。
HTML 常用標籤速查總表
全部 HTML 標籤超過 100 個，但以下約 60 個已涵蓋實務 95% 的使用場景。本表整理本文出現過、以及實務上最常用的標籤，依用途分類。建議把這張表存起來，寫網頁時當字典查：記不住標籤沒關係，知道去哪裡查才重要。
文件結構（每個網頁的必備骨架）
| 標籤 | 名稱 | 用途說明 |
|---|---|---|
<!DOCTYPE html> |
文件聲明 | 宣告使用 HTML5 標準，必須放在檔案第一行 |
<html> |
根元素 | 包住整份文件，記得加 lang="zh-Hant-TW" |
<head> |
頭部 | 放給瀏覽器與搜尋引擎看的資訊，畫面上看不到 |
<body> |
身體 | 放所有使用者看得到的內容 |
<title> |
網頁標題 | 顯示在瀏覽器分頁與搜尋結果，是 SEO 核心 |
<meta> |
中繼資料 | 設定編碼（charset）、手機縮放（viewport）、描述（description） |
<link> |
外部資源 | 引入 CSS 檔案、設定 canonical 標準網址 |
<script> |
程式腳本 | 引入或撰寫 JavaScript |
語意化區塊（HTML5 排版骨架）
| 標籤 | 名稱 | 用途說明 |
|---|---|---|
<header> |
頁首 | 網站 LOGO、導覽列所在區域 |
<nav> |
導覽列 | 主要連結選單，搜尋引擎極重視這裡的連結 |
<main> |
主要內容 | 頁面核心區域，每頁只能有一個 |
<article> |
文章 | 獨立完整的內容，如一篇部落格文章 |
<section> |
區塊 | 有特定主題的內容群組，通常搭配標題 |
<aside> |
側邊欄 | 相關文章、作者簡介等間接相關內容 |
<footer> |
頁尾 | 版權宣告、聯絡資訊 |
<div> |
無語意區塊 | 純排版容器，語意化標籤都不適用時才用 |
文字內容
| 標籤 | 名稱 | 用途說明 |
|---|---|---|
<h1>～<h6> |
標題 | 六級標題，H1 每頁僅一個，階層不可跳級 |
<p> |
段落 | 定義段落，自動產生上下間距 |
<br> |
換行 | 強制換行，僅用於地址、詩詞等緊密換行 |
<hr> |
分隔線 | 主題轉換的水平分隔線 |
<strong> |
重點強調 | 粗體加語意強調，SEO 權重較高，優先使用 |
<b> |
粗體 | 純視覺粗體，無語意 |
<em> |
語氣強調 | 斜體加語意強調 |
<i> |
斜體 | 純視覺斜體，無語意 |
<span> |
行內容器 | 無語意，用於文字局部套用 CSS |
<blockquote> |
引用區塊 | 引用他人的整段文字 |
<code> |
程式碼 | 行內顯示程式碼片段 |
<pre> |
預格式化 | 保留原始空白與換行，常與 code 標籤搭配 |
圖片與多媒體
| 標籤 | 名稱 | 用途說明 |
|---|---|---|
<img> |
圖片 | 單標籤，src 指定路徑、alt 必填（SEO 與無障礙關鍵） |
<figure> |
圖表容器 | 包住圖片與其說明文字 |
<figcaption> |
圖片說明 | 放在 figure 內的圖片標題文字 |
<video> |
影片 | 嵌入影片檔，可加 controls 顯示播放控制 |
<audio> |
音訊 | 嵌入聲音檔 |
<iframe> |
內嵌框架 | 嵌入外部網頁，如 YouTube 影片、Google 地圖 |
連結
| 標籤或屬性 | 名稱 | 用途說明 |
|---|---|---|
<a href="..."> |
超連結 | 網路世界的橋樑，href 指定目的地 |
target="_blank" |
新分頁開啟 | 搭配 rel="noopener" 使用更安全 |
href="#id名稱" |
錨點連結 | 頁內跳轉，目標元素需先設定 id |
href="mailto:..." |
電郵連結 | 點擊開啟郵件軟體 |
href="tel:..." |
電話連結 | 手機點擊直接撥號，行動版必備 |
列表
| 標籤 | 名稱 | 用途說明 |
|---|---|---|
<ul> |
無序列表 | 前方為小黑點，導覽選單的骨架 |
<ol> |
有序列表 | 前方為數字，適合步驟教學 |
<li> |
列表項目 | 放在 ul 或 ol 內的每一項 |
<dl> |
描述列表 | 「名詞加解釋」的成對列表 |
<dt>／<dd> |
名詞或描述 | dt 放名詞、dd 放對應解釋 |
表格
| 標籤 | 名稱 | 用途說明 |
|---|---|---|
<table> |
表格容器 | 只用於呈現數據，不可用於排版 |
<tr> |
橫列 | Table Row，表格的一列 |
<th> |
標題儲存格 | 自動加粗置中，放欄位名稱 |
<td> |
資料儲存格 | 一般資料內容 |
<thead>／<tbody>／<tfoot> |
表格分區 | 標示表頭、表身、表尾，利於語意與樣式 |
<caption> |
表格標題 | 整張表格的說明文字 |
表單
| 標籤或屬性 | 名稱 | 用途說明 |
|---|---|---|
<form> |
表單容器 | action 指定送出位置、method 指定方式（GET 或 POST） |
<input type="text"> |
文字框 | 單行文字輸入 |
<input type="email"> |
信箱框 | 手機自動跳出含 @ 的鍵盤 |
<input type="tel"> |
電話框 | 手機自動跳出數字鍵盤 |
<input type="password"> |
密碼框 | 輸入內容顯示為圓點 |
<input type="radio"> |
單選圓鈕 | 多選一，同組需相同 name |
<input type="checkbox"> |
核取方塊 | 可複選 |
<textarea> |
多行文字框 | 留言、意見等長文字輸入 |
<select>／<option> |
下拉選單 | select 包住多個 option 選項 |
<label> |
欄位標籤 | for 綁定輸入框 id，點文字即聚焦，手機友善 |
<button type="submit"> |
送出按鈕 | 觸發表單送出 |
速查表使用建議：新手先熟練文件結構、語意化區塊、文字內容、圖片與連結這四類，其餘用到再查即可。查詢標籤時，直接搜尋「MDN 加標籤名稱」就能找到權威說明。
常見問答 FAQ
HTML、CSS、JavaScript 一定要全部學完才能做網頁嗎？
不需要，三者可以分階段學習。HTML 負責網頁的內容結構，只靠 HTML 就能做出一個可以在瀏覽器打開、內容完整的靜態網頁，因此建議先把 HTML 的文件結構、標題段落、圖片連結與語意化標籤練熟。接著再學 CSS，為網頁加上顏色、字體與版面設計；至於 JavaScript，等到需要輪播圖、表單驗證、購物車這類互動功能時再投入即可。循序漸進的好處是每個階段都有看得到的成果，比較不會因為一次面對三種技術而產生挫折感，也更容易釐清問題出在結構、樣式還是程式邏輯。
學會 HTML 基礎大約需要多久？
以本文的學習路線圖估算，總時數約六到十小時；若每天投入一到兩小時，一週內就能獨立寫出結構完整的靜態網頁，例如本文實戰章節的個人介紹頁。不過關鍵不在累積時數，而在於每個範例都親手做過一次：複製程式碼、存檔、用瀏覽器打開、再動手修改觀察變化。看完教學不等於學會，能不看範例自己敲出正確的文件結構、標題階層與表單欄位，才代表真正掌握。建議把「改壞範例再修好」當成日常練習，理解速度會比單純閱讀快很多。
寫的網頁在手機上字變超小、版面跑掉怎麼辦？
最常見的原因是 head 區塊缺少 viewport 設定。請檢查文件的 head 內是否有 meta name="viewport" content="width=device-width, initial-scale=1.0" 這行標籤，它的作用是告訴手機瀏覽器依照裝置螢幕寬度呈現網頁，而不是把整個桌面版畫面縮小塞進手機螢幕。缺少這行時，手機會以預設的桌面寬度渲染，文字自然變得非常小。補上之後重新整理即可改善，這也是響應式網頁設計（RWD）的第一步；後續搭配 CSS 的媒體查詢，就能針對不同螢幕寬度調整版面。行動裝置友善同時是搜尋引擎評估網頁品質的基本門檻，這行設定務必列入每個專案的起手式。
為什麼圖片顯示破圖？該怎麼檢查？
九成以上的破圖是路徑錯誤造成的。建議依序檢查三件事：第一，圖片檔名是否完全正確，注意大小寫，因為多數網頁伺服器區分大小寫，Image.jpg 與 image.jpg 會被視為不同檔案；第二，副檔名是否正確，確認實際檔案是 .jpg 還是 .png，不要只看檔名猜測；第三，若使用相對路徑，確認圖片資料夾與 HTML 檔案的層級關係是否正確，例如圖片放在 images 資料夾內，src 就要寫成 images 斜線加檔名。另外也建議同時補上 alt 替代文字，即使圖片暫時載入失敗，使用者仍能看到說明文字。
現在有 AI 和網頁製作軟體，還需要手寫 HTML 嗎？
需要，而且 AI 搜尋時代反而更重要。AI 與網頁製作工具能快速產出程式碼，但如果不懂 HTML 原理，當版面跑掉、SEO 排名上不去，或需要客製化修改時就會束手無策。懂 HTML 的人可以看懂並修正 AI 產出的結構問題，例如標題階層錯亂、缺少語意化標籤、圖片沒有 alt 屬性等，這些細節直接影響搜尋引擎與 ChatGPT、Perplexity 這類 AI 搜尋工具對網頁的理解。把 AI 當成加速器、把 HTML 基礎當成除錯與優化的底氣，兩者搭配才能真正掌控自己的網站品質。
HTML 標籤有分大小寫嗎？
HTML 本身不區分大小寫，DIV 與 div 在瀏覽器眼中是相同的標籤，網頁一樣能正常顯示。不過根據 W3C 標準與業界共同規範，強烈建議一律使用小寫：小寫程式碼更乾淨、易讀，團隊協作時風格一致，也與較嚴格的標記規範相容。另外要注意的是，雖然標籤名稱不分大小寫，但檔案路徑與屬性值在多數伺服器上是區分大小寫的，例如 src 指定的圖片檔名大小寫寫錯就會破圖，這一點經常被新手混淆，建議養成全部小寫的習慣，從源頭避免問題。
練習時要去哪裡查標籤的正確用法？
推薦兩個免費資源。第一是 MDN Web Docs，由 Mozilla 維護，是官方等級的權威技術文件，提供繁體中文版本，每個標籤都有語法說明、屬性列表與實際範例，遇到不熟的標籤直接搜尋「MDN 加標籤名稱」即可。第二是 W3Schools，特色是附有線上即時練習器，可以直接在瀏覽器修改程式碼並立刻看到結果，非常適合邊查邊試。實務上的建議是：快速試語法用 W3Schools，需要精確、完整的規格說明時查 MDN，兩者搭配就能涵蓋絕大多數的學習需求。
延伸學習資源：MDN Web Docs、W3Schools
