HTML 語法怎麼學？HTML 教學帶你掌握文字顏色與表格

HTML 是建立網頁結構的標記語言，不是程式語言。學習重點包括文件架構、標題與段落、文字大小、HTML 語法顏色、超連結、圖片、清單及 HTML 語法表格。現代網頁應使用 HTML 表達內容語意、CSS 控制外觀、JavaScript 處理互動，避免繼續使用已淘汰的 <font>、<center> 與 <basefont> 等外觀標籤。

內容大綱

HTML 語法是什麼

HTML 的完整名稱是 HyperText Markup Language，中文稱為「超文字標記語言」。HyperText 指可以透過連結互相引用的結構化內容；Markup Language 則表示利用標籤描述標題、段落、表格及其他內容的用途。

HTML 本身不負責條件判斷、資料運算或流程控制，因此不屬於程式語言。瀏覽器讀取 HTML 文件後，會把標籤解析成文件物件模型，也就是 DOM，再依據 CSS 呈現版面，並執行 JavaScript 所提供的互動功能。

標準 HTML 元素通常包含起始標籤、內容與結束標籤，例如：

<p>這是一個段落。</p>

<p> 是起始標籤，</p> 是結束標籤，中間是段落內容。部分元素不需要結束標籤，例如圖片使用的 <img>、換行使用的 <br>，以及表單欄位使用的 <input>。

HTML 語法教學：建立完整文件

一份可正常運作的 HTML5 文件應宣告文件類型、網頁語言、字元編碼、行動裝置顯示設定與頁面標題。以下 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>HTML 基礎教學</title>
  <meta name="description" content="介紹 HTML 標題、文字、顏色與表格語法。">
</head>
<body>
  <header>
    <h1>HTML 基礎教學</h1>
  </header>

  <main>
    <p>這是網頁的主要內容。</p>
  </main>
</body>
</html>

<!doctype html> 告訴瀏覽器使用 HTML5 標準模式。lang="zh-Hant-TW" 表示內容語言為台灣繁體中文，有助於搜尋引擎、翻譯工具及螢幕閱讀器辨識語言。charset="UTF-8" 可以降低繁體中文出現亂碼的風險。

<title> 會顯示在瀏覽器分頁，也通常是搜尋結果標題的重要來源。meta description 則可向搜尋引擎摘要說明頁面內容，但不保證一定會原樣出現在搜尋結果中。

設定標題與預設文字大小

HTML 提供 <h1> 到 <h6> 六個層級的標題。數字代表內容階層，而不只是視覺大小。<h1> 通常用於頁面主題，<h2> 用於主要章節，<h3> 則是 <h2> 之下的子主題。

<h1>HTML 完整教學</h1>
<h2>文字設定</h2>
<h3>文字大小</h3>
<p>這是一般段落文字。</p>

不要為了取得較大的字體而任意使用 <h1>，也不應只因為想縮小字體就跳過標題層級。正確做法是先建立合理的內容結構，再透過 CSS 調整顯示大小。

瀏覽器的預設文字大小通常約為 16px，但實際結果可能受到瀏覽器、作業系統及使用者設定影響。為了保留縮放與無障礙彈性，內文可使用 rem，局部元件可使用 em。

<style>
  html {
    font-size: 100%;
  }

  body {
    font-size: 1rem;
    line-height: 1.7;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }
</style>

1rem 是相對於根元素的大小。若使用者放大瀏覽器文字，採用相對單位的版面通常比固定像素更容易調整。

實體字型與邏輯字型控制標籤

早期 HTML 教材常將字型標籤分為實體字型與邏輯字型。實體字型著重於外觀，例如 <b> 表示視覺上的粗體，<i> 表示與一般文字不同的字體樣式。邏輯或語意標籤則說明內容的重要性或語氣，例如 <strong> 代表高度重要，<em> 代表強調。

<p><b>粗體外觀</b></p>
<p><i>不同語氣或術語</i></p>
<p><strong>這是重要警告。</strong></p>
<p><em>這個詞需要特別強調。</em></p>

<b> 與 <strong> 的預設外觀可能都是粗體，但語意並不相同；<i> 與 <em> 也不能只依畫面是否傾斜來判斷。撰寫具有搜尋價值及無障礙需求的內容時，應依照文字用途選擇元素，而不是只看預設外觀。

早期的 <font size="5">、<font face="Arial"> 與 <basefont> 已不屬於現代 HTML 的建議用法。字型、尺寸及顏色應交由 CSS 控制，使內容結構與視覺樣式分離。

特殊文字與字型語法

HTML 提供多種可描述特殊內容的語意元素。<mark> 可標示與目前情境相關的文字，<small> 適合附註或版權資訊，<sub> 與 <sup> 分別呈現下標及上標，<code> 用於程式碼片段，<pre> 則保留空白與換行。

<p>搜尋結果中的<mark>關鍵內容</mark></p>
<p>水的化學式是 H<sub>2</sub>O。</p>
<p>二 的三次方可寫成 2<sup>3</sup>。</p>
<p>段落元素寫成 <code>&lt;p&gt;</code>。</p>

<pre><code>&lt;h1&gt;網頁標題&lt;/h1&gt;</code></pre>

如果要在頁面上直接顯示 <p> 等標籤，必須將小於符號寫成 <，大於符號寫成 >，否則瀏覽器可能將它解析成真正的元素。這也是在 HackMD 或其他 Markdown 編輯環境展示 HTML 原始碼時需要注意的地方；使用程式碼區塊通常比直接貼上標籤穩定。

HTML 語法顏色的現代設定方式

HTML 語法顏色實際上主要由 CSS 的 color 與 background-color 屬性控制。顏色可以使用名稱、十六進位、RGB、RGBA、HSL 等表示法。

<p style="color: red;">使用顏色名稱</p>
<p style="color: #d60000;">使用十六進位色碼</p>
<p style="color: rgb(0, 102, 204);">使用 RGB</p>
<p style="color: hsl(145, 63%, 32%);">使用 HSL</p>

十六進位顏色通常寫成 #RRGGBB。前兩碼代表紅色，中間兩碼代表綠色，最後兩碼代表藍色，每組數值介於 00 到 FF。例如 #ff0000 是紅色、#00ff00 是綠色、#0000ff 是藍色。

早期寫法可能使用：

<font color="#ff0000">紅色文字</font>

雖然部分瀏覽器仍可能顯示這段內容，但 <font> 已被淘汰，不應用於新網站。現代寫法應使用 class 與 CSS：

<style>
  .warning-text {
    color: #b00020;
    font-weight: 700;
  }
</style>

<p class="warning-text">這是一段重要提醒。</p>

設定顏色時不能只考慮美觀。文字與背景必須有足夠對比，而且錯誤、成功或警告狀態不應只靠紅色、綠色區分，還應搭配文字說明或其他可辨識資訊。

HTML 顏色與文字標籤比較表

需求	舊式寫法	現代建議	說明
文字顏色	`<font color="red">`	CSS `color`	`<font>` 已淘汰
文字大小	`<font size="5">`	CSS `font-size`	建議使用 `rem` 或 `em`
字型名稱	`<font face="Arial">`	CSS `font-family`	應提供候補字型
文字置中	`<center>`	CSS `text-align: center`	`<center>` 已淘汰
粗體外觀	`<b>`	`<b>` 或 CSS	適用於不具重要語意的提示
重要內容	只套用粗體	`<strong>`	可表達內容重要性
強調語氣	只套用斜體	`<em>`	可表達語意上的強調
背景顏色	`bgcolor` 屬性	CSS `background-color`	樣式應集中管理

建立 HTML 超連結

HTML 使用 <a> 標籤建立超連結，讓不同網頁與網路資源彼此連接。href 屬性指定目的地，連結文字則應清楚描述使用者點擊後會前往哪裡。

<a href="https://html.spec.whatwg.org/">閱讀 HTML 標準</a>

如果連結會開啟新分頁，可使用 target="_blank"，並搭配適當的 rel 屬性：

HTML

href=”https://developer.mozilla.org/”

target=”_blank”

rel=”noopener noreferrer”

查閱網頁技術文件

避免大量使用「按這裡」作為連結文字。具有描述性的錨點文字能協助讀者、螢幕閱讀器與搜尋引擎理解連結目的，但也不應刻意重複堆疊關鍵字。

HTML 語法表格的正確結構

HTML 語法表格使用 <table> 建立容器，<tr> 表示橫列，<th> 表示標題儲存格，<td> 表示資料儲存格。較完整的 HTML 語法表還可使用 <caption>、<thead>、<tbody> 與 <tfoot> 描述資料結構。

<table>
  <caption>HTML 學習進度</caption>
  <thead>
    <tr>
      <th scope="col">主題</th>
      <th scope="col">用途</th>
      <th scope="col">狀態</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">文字標籤</th>
      <td>建立標題與段落</td>
      <td>已完成</td>
    </tr>
    <tr>
      <th scope="row">表格</th>
      <td>呈現二 維資料</td>
      <td>學習中</td>
    </tr>
  </tbody>
</table>

<caption> 可提供表格名稱，scope="col" 表示欄標題，scope="row" 表示列標題，這些資訊有助於輔助工具理解資料關係。

表格只適合呈現具有列與欄關係的資料，不應拿來製作整個網站版面。align、width、border、cellpadding 與 bgcolor 等舊式外觀屬性，也應改由 CSS 處理。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    padding: 0.75rem;
    border: 1px solid #999;
    text-align: left;
  }
</style>

如果表格欄位較多，可在外層容器設定水平捲動，避免行動裝置畫面被撐破。

如何選擇 HTML 語法編輯器

HTML 語法編輯器可分為純文字編輯器、整合開發環境與線上編輯器。初學者可選擇具備語法上色、自動縮排、標籤補全及即時預覽功能的工具；較大型的專案則需考慮版本控制、搜尋取代、擴充套件與除錯整合。

Visual Studio Code、Notepad++ 等工具可以直接編輯 HTML 原始碼。線上編輯環境則適合快速測試單一範例，但若程式碼涉及未公開資訊，不宜直接貼到第三方服務。

編輯器只是協助撰寫的工具，不能取代對標準的理解。自動補全產生的標籤仍可能存在結構、語意或無障礙問題，因此完成後仍需進行 HTML 語法測試。

HTML 語法產生器的用途與限制

HTML 語法產生器能快速建立表格、表單、按鈕、色碼或基本頁面模板，適合用於初稿與重複性結構。不過，自動產生的內容可能夾帶行內樣式、過時標籤、不必要的巢狀元素或缺少替代文字。

使用產生器後，應確認文件是否採用 HTML5、標籤是否正確閉合、內容階層是否合理，以及表單標籤、圖片替代文字和表格標題是否完整。來源不明的產生器也可能插入追蹤碼或外部腳本，因此不應未經檢查就直接部署。

HTML 語法測試與錯誤排除

最直接的 HTML 語法測試方式，是將 .html 文件儲存後用瀏覽器開啟。進一步可使用瀏覽器開發者工具檢查 DOM、CSS、網路請求與主控台訊息，並利用 HTML 驗證工具找出不合法的巢狀結構、重複 ID 或缺少必要屬性等問題。

測試時至少要檢查桌面與行動版畫面、鍵盤操作、文字縮放、連結目的地、圖片替代文字、表單標籤及主要瀏覽器的呈現結果。通過語法驗證不代表網站一定具備良好的使用體驗，但可以先排除基本結構問題。

若元素沒有正常顯示，應依序檢查標籤拼字、結束標籤、引號、巢狀關係、檔案路徑與 CSS 覆寫。瀏覽器有錯誤修復機制，即使原始碼不正確也可能顯示內容，因此不能只以「看起來正常」判定語法無誤。

HTML 語法查詢與可信資料來源

進行 HTML 語法查詢時，應優先參考 WHATWG HTML Living Standard、W3C 無障礙相關規範及 MDN Web Docs。這些來源會說明元素用途、允許的屬性、相容性與無障礙注意事項，比未標示更新日期的舊教學更可靠。

查詢特定標籤時，除了確認「怎麼寫」，也要查看該元素是否已淘汰、適用於哪些內容，以及是否有更符合語意的替代方案。例如舊資料可能仍介紹 <font> 和 <center>，但現代標準已改用 CSS。

搜尋到 HTML 語法範例後，應先理解每個元素的功能，再根據網站需求調整。直接複製未知來源的程式碼，可能帶來無效屬性、外部資源失效、資安或個人資料風險。

符合 SEO 與無障礙的 HTML 原則

良好的 HTML 應讓主要內容即使沒有 CSS 仍具有清楚結構。頁面需要準確的 <title>、自然的標題層級、描述性連結、具有 alt 的資訊型圖片，以及能表達用途的語意元素。

<header>、<nav>、<main>、<article>、<section> 與 <footer> 能協助描述頁面區域，但不應為了加入標籤而過度切割內容。每個頁面通常只應有一個代表主要內容區域的 <main>。

SEO 不等於重複堆疊關鍵字。關鍵詞應出現在真正回答搜尋需求的位置，並搭配完整、正確、可驗證的內容。標準化結構能降低搜尋引擎理解頁面的成本，但內容品質、網站速度、行動裝置體驗與來源可信度同樣重要。

結論

HTML 負責建立網頁的內容與語意結構，CSS 負責文字大小、顏色及版面，JavaScript 則負責互動。學習時應先掌握文件架構、標題、段落、連結、特殊文字及 HTML 語法表格，再使用 HTML 語法編輯器、驗證工具與瀏覽器開發者工具進行測試。

舊式 <font>、<center> 和外觀屬性雖可能仍被瀏覽器支援，卻不適合新網站。依照現代 HTML 標準撰寫語意清楚、可存取且容易維護的內容，才是兼顧使用者、搜尋引擎與長期維護的做法。

常見問題

1. HTML 是程式語言嗎？

不是。HTML 是超文字標記語言，用來描述網頁內容的結構與語意，本身沒有一般程式語言所具備的流程控制與運算能力。

2. HTML、CSS 與 JavaScript 有什麼差別？

HTML 建立內容結構，CSS 控制顏色、字型與版面，JavaScript 處理按鈕事件、資料更新及其他互動行為。

3. HTML 文字顏色應使用 font 標籤嗎？

不建議。<font> 已被淘汰，應使用 CSS 的 color 屬性，並優先透過 class 集中管理樣式。

4. 十六進位 HTML 色碼怎麼看？

#RRGGBB 分別代表紅、綠、藍三種色彩，每組數值介於 00 到 FF。例如 #000000 是黑色，#ffffff 是白色。

5. h1 到 h6 只是控制文字大小嗎？

不是。它們主要代表標題層級與內容結構。文字大小應使用 CSS 調整，不應為了外觀任意改變標題層級。

6. strong 和 b 標籤有何不同？

<strong> 表達內容具有重要性，<b> 則讓文字在語意上與周圍內容有所區別，但不代表額外的重要程度。

7. HTML 表格可以用來排版嗎？

不建議。表格應用於具有列、欄關係的資料，網頁版面應使用 CSS Grid、Flexbox 或其他現代 CSS 技術。

8. 如何判斷 HTML 語法是否正確？

可使用 HTML 驗證工具檢查標準錯誤，並搭配瀏覽器開發者工具、鍵盤操作、行動裝置與無障礙測試。

9. HTML 語法產生器產生的程式碼可以直接使用嗎？

不一定。使用前應檢查是否含有淘汰標籤、行內樣式、不必要元素、外部腳本，以及缺少無障礙屬性的情況。

10. 哪裡可以查到可靠的 HTML 語法？

可優先查閱 WHATWG HTML Living Standard、W3C 相關規範與 MDN Web Docs，並留意資料的更新日期及元素是否已被淘汰。