Skip to content

建立 2026-09-15 更新 2026-09-15

HTML 是什麼

HTML 是網頁的標記語言：用標籤說明「這段是標題」「這張是圖」「這個是連結」。它不負責算數學、也不負責排版細節；瀏覽器讀到標記後，才決定預設外觀，並把結構交給 CSS 與 JavaScript 使用。

本頁會說明 HTML 在網頁三層裡的位置、HTML5 這個名稱實際指什麼，以及你該用什麼工具開始寫。

網頁的三層分工

現代網頁幾乎都由三種技術疊起來：

技術 負責 類比
HTML 內容與結構 文章大綱與正文
CSS 外觀與排版 字體、顏色、版面
JavaScript 行為與互動 按鈕按下後發生的事

只寫 HTML，瀏覽器仍能顯示一份可讀的文件。先把結構寫對，再學 CSS；不要為了「看起來比較大」就濫用 h1，那是標題的語意，不是字級工具。

標記怎麼運作

一個元素（element）通常長這樣：

<p class="lead">這是一段話。</p>
  • <p> 是開始標籤（start tag）。
  • </p> 是結束標籤（end tag）。
  • 中間是內容。
  • class="lead" 是屬性（attribute）：名稱加上值，用來補充資訊或給 CSS 選取。

有些元素沒有內容，稱為空元素（void element），例如圖片：

<img src="photo.jpg" alt="實驗室裡的示波器">

沒有 </img>。必要資訊全部寫在開始標籤的屬性裡。

瀏覽器把整份 HTML 解析成一棵樹，稱為 DOM（Document Object Model，文件物件模型）。之後 CSS 與 JavaScript 都是在這棵樹上工作。

HTML5 代表什麼

日常說的「HTML5」有兩層意思：

  1. 現行的 HTML。現在寫網頁就是寫 HTML5：檔案開頭用 <!DOCTYPE html>，不再使用 XHTML 那套嚴格 XML 語法當預設。
  2. 2000 年代中後期補進來的能力。例如 header／nav／main 等語意標籤、原生 video／audio、更多表單輸入類型。以前要靠 Flash 或外掛的事，現在瀏覽器自己做。

規格由 WHATWG HTML Living Standard 持續更新，沒有「HTML6」這種下一個大版本名稱。查元素行為時，以 MDN 與這份 Living Standard 為準。

開始寫之前

需要兩樣東西：

  1. 編輯器：建議 Visual Studio Code，存成 .html 即可。
  2. 瀏覽器：Chrome、Firefox、Safari、Edge 都能開本機檔案。用檔案總管把 index.html 拖進視窗，或在編輯器安裝 Live Server 一類擴充功能。

第一個檔案請命名為 index.html。網站根目錄的 index.html 會被當成首頁；本機練習時，這個習慣也省得記一堆檔名。

官方文件

完整初學者路徑見 MDN：HTML：建立內容 與 web.dev Learn HTML。

推薦影音

快速建立心智模型

簡述：Fireship 用約兩分鐘講 HTML 從 Tim Berners-Lee 到 HTML5、DOM 樹，以及 html／head／body。看完再進下一頁寫骨架。

跟著做出第一個網站

簡述：freeCodeCamp（Mike Dane 主講）從選編輯器、建立檔案講到常用標籤。時間較長，適合當本分類的完整練習帶。

下一頁：文件骨架。