HTML 是什麼？初學者掌握基本語法，輕鬆做出第一個網頁

內容大綱

HTML 是什麼？先理解網頁的骨架

HTML 是 HyperText Markup Language 的縮寫，HTML 意思是「超文字標記語言」，主要用途是描述網頁內容的結構與意義。它不是負責運算邏輯的程式語言，而是一種標記語言，透過標籤告訴瀏覽器：這一段是標題、那一段是文章、這裡要放圖片、那裡要建立連結。

如果把網頁比喻成一棟房子，HTML 就是樑柱、牆壁、房間與門窗；CSS 負責油漆、顏色和裝潢；JavaScript 則像電燈開關、自動門與電梯，讓網頁能夠回應使用者操作。三者經常一起使用，但學習網頁製作時，應先掌握 HTML 的內容結構。

瀏覽器收到 HTML 文件後，會解析其中的元素與層級，再將文字、圖片、影片、表格、表單等內容顯示成可閱讀的網頁。無論網站後端使用 PHP、Python、Java、Node.js 或其他技術，只要內容要呈現在瀏覽器中，最終通常都會產生 HTML。

HTML 具備跨平台特性。同一份符合網頁標準的 HTML 文件，通常能在 Windows、macOS、Linux、Android 與 iOS 的現代瀏覽器中開啟。不過，不同瀏覽器仍可能有細微差異，因此正式網站需要經過相容性與無障礙測試。

HTML 用什麼寫？初學者需要的開發環境

HTML 本質上是純文字，因此不必購買昂貴軟體。Windows 的記事本、macOS 的文字編輯器都能建立 HTML，但專用程式碼編輯器會提供標籤提示、自動縮排、語法上色與錯誤檢查，較適合長期使用。

常見選擇包括 Visual Studio Code、Sublime Text、Notepad++ 與線上編輯環境。Visual Studio Code 可在多種作業系統使用，並能安裝擴充功能；Sublime Text 啟動速度快；Notepad++ 適合 Windows；CodePen、JSFiddle 等線上工具則能直接在瀏覽器中練習，不必先設定電腦環境。

HTML 開發工具比較

工具	使用方式	主要優點	適合對象
Visual Studio Code	安裝於電腦	免費、語法提示完整、擴充功能多	想持續學習前端開發者
Sublime Text	安裝於電腦	輕量、速度快、介面簡潔	重視編輯效率者
Notepad++	Windows 軟體	免費、操作容易、支援語法上色	Windows 初學者
CodePen	瀏覽器線上使用	可即時預覽 HTML、CSS、JavaScript	想快速測試程式碼者
JSFiddle	瀏覽器線上使用	分區編輯並立即執行	練習課程範例者
系統文字編輯器	電腦內建	不需額外安裝	只想建立第一個檔案者

選擇工具時不必過度糾結。編輯器只負責協助輸入文字，不會改變 HTML 的核心規則。初學者可從 Visual Studio Code 或線上工具開始，熟悉檔案、資料夾與瀏覽器預覽的流程後，再加入其他功能。

HTML 怎麼開？建立第一個 HTML 網頁

要回答 HTML 怎麼開，必須先區分「查看網頁」與「編輯原始碼」。查看 .html 檔案時，可用 Chrome、Edge、Firefox 或 Safari 開啟；如果要修改內容，則要用程式碼編輯器開啟。

建立第一個網頁時，可新增純文字檔案，將檔名儲存為 index.html。副檔名必須是 .html，不能只是看起來像 HTML、實際上卻是 .txt。Windows 使用者若看不到副檔名，可在檔案總管中開啟「顯示副檔名」。

將以下內容存入 index.html：

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>歡迎來到我的網站</h1>
  <p>這是我建立的第一個 HTML 頁面。</p>
</body>
</html>

儲存後雙擊檔案，系統通常會使用預設瀏覽器開啟。也可以在瀏覽器按下 Ctrl + O，macOS 可使用 Command + O，再選擇 HTML 檔案。如果修改原始碼後畫面沒有變化，先確認已儲存檔案，再重新整理瀏覽器。

<!doctype html> 用來宣告這是 HTML5 文件；<html> 包住整份文件；<head> 放置頁面設定與搜尋引擎需要的資訊；<body> 則包含使用者實際看到的內容。lang="zh-Hant" 表示主要語言為繁體中文，有助於瀏覽器、搜尋引擎與輔助技術辨識頁面語言。

HTML 基本語法：元素、標籤與屬性

HTML 基本語法的核心是元素。大多數元素由起始標籤、內容與結束標籤組成，例如：

<p>這是一段文字。</p>

<p> 是起始標籤（Opening Tag），</p> 是結束標籤（Closing Tag），中間文字是元素內容。結束標籤比起始標籤多了一個斜線，用來表示此元素到此結束。

HTML 元素可以包含其他元素，這種結構稱為巢狀結構。例如：

<p>請閱讀我的 <a href="about.html">網站介紹</a>。</p>

在這段程式碼中，a 元素放在 p 元素裡。標籤應按照正確順序關閉，就像先打開外盒、再打開內盒，收起來時應先關閉內盒，再關閉外盒。

屬性 Attribute 的作用

屬性會提供元素的額外資訊，通常寫在起始標籤內。以下連結中的 href 就是屬性：

<a href="https://example.com">前往範例網站</a>

圖片元素常用 src 指定圖片位置，使用 alt 提供替代文字：

<img src="images/cat.jpg" alt="一隻坐在窗邊的橘貓">

img 是不需要結束標籤的空元素。src 可以指向網站內的相對路徑，也可以使用完整網址。alt 不只是圖片載入失敗時顯示的文字，也能協助螢幕閱讀器使用者理解圖片內容。

標題、段落與連結

HTML 提供 <h1> 到 <h6> 六個標題層級。h1 通常代表頁面主題，後續章節依內容層級使用 h2、h3。標題不應只為了字體大小而選擇，因為它同時表達文章架構。

段落使用 <p>，連結使用 <a>，清單則可使用 <ul>、ol 與 li。HTML 的重點不是把畫面排得漂亮，而是清楚標記每項內容的角色。外觀應交由 CSS 處理。

HTML 文件結構與語意化標籤

現代 HTML 鼓勵使用具有明確意義的語意化標籤。常見元素包括 <header>、nav、main、article、section、aside 與 footer。它們能讓開發者、搜尋引擎與輔助技術更容易判斷內容用途。

<body>
  <header>
    <h1>旅遊筆記</h1>
    <nav>
      <a href="/">首頁</a>
      <a href="/about.html">關於我</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>台南一日遊</h2>
      <p>本文整理交通與景點資訊。</p>
    </article>
  </main>

  <footer>
    <p>網站內容版權所有</p>
  </footer>
</body>

語意化結構不保證網頁一定獲得較高搜尋排名，但能提高內容可理解性，並為無障礙與搜尋引擎解析打下良好基礎。SEO 仍需同時考量內容品質、搜尋意圖、網站速度、行動裝置體驗及其他技術因素。

每個頁面還應設定清楚且不重複的 <title>，讓瀏覽器分頁與搜尋結果理解主題。meta description 可提供頁面摘要，但不是保證排名的直接因素。

div、span 與頁面結構

div 是區塊層級的通用容器，常用來包住一組內容；span 是行內容器，通常用於標記句子中的一小段文字。兩者本身沒有明確語意，適合搭配 class 或 id 供 CSS、JavaScript 使用。

<div class="product">
  <h2>商品名稱</h2>
  <p>價格：<span class="price">500 元</span></p>
</div>

如果已有合適的語意化元素，應優先使用。例如網站導覽適合使用 nav，文章適合使用 article，不必全部都寫成 div。過度堆疊沒有意義的容器，會降低程式碼可讀性。

class 可重複套用在多個元素上，適合共用樣式；同一頁內的 id 應保持唯一，常用於頁內定位、表單標籤或 JavaScript 選取元素。

圖片、背景圖片與 iframe

內容圖片應使用 <img>，並透過 src 指定來源。若要改善載入效率，可為非首屏圖片加入 loading="lazy"。圖片尺寸也應適當壓縮，避免大型檔案拖慢網頁。

HTML

src=”images/mountain.jpg”

alt=”日出時的山景”

width=”800″

height=”533″

loading=”lazy”>

background image 並不是 HTML 標籤，而是 CSS 的背景樣式。裝飾性圖片適合使用 background-image，真正具有內容意義的圖片則應使用 img，才能提供替代文字與明確語意。

<div class="banner">活動資訊</div>

.banner {
  background-image: url("images/banner.jpg");
  background-size: cover;
  background-position: center;
}

iframe 可將另一個網頁或外部內容嵌入目前頁面，例如地圖或影片。不過第三方內容可能影響效能、隱私與安全，應確認來源可信，並加入適當的 title。

HTML

src=”https://example.com/embed”

title=”嵌入內容說明”

loading=”lazy”>

若網站接受使用者輸入的 iframe 網址，必須進行安全檢查。實際開發時也可依需求研究 sandbox、Permissions Policy 與內容安全政策，限制嵌入內容的權限。

使用 table 建立資料表格

table 適合呈現有列與欄關係的資料，例如價格、日期與規格比較，不應拿來控制整個網頁版面。表格通常由 table、caption、thead、tbody、tr、th 與 td 組成。

<table>
  <caption>課程時間表</caption>
  <thead>
    <tr>
      <th scope="col">課程</th>
      <th scope="col">時間</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML 基礎</td>
      <td>星期一</td>
    </tr>
  </tbody>
</table>

th 代表標題儲存格，td 代表資料儲存格，scope 可協助輔助技術判斷標題與資料的關係。若表格在手機上過寬，可透過 CSS 建立橫向捲動區域，但不應為了縮小畫面而刪除重要資料。

使用 form 建立表單

表單讓使用者輸入資料，常見元素包括 form、label、input、textarea、select 與 button。每個輸入欄位應有明確標籤，而不是只依賴 placeholder。

<form action="/contact" method="post">
  <label for="name">姓名</label>
  <input id="name" name="name" type="text" required>

  <label for="email">電子郵件</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">送出</button>
</form>

action 指定資料送往哪裡，method 定義傳送方式。name 是後端接收欄位時的重要名稱，required 則代表必填。瀏覽器內建驗證可以改善操作體驗，但不能取代伺服器端驗證，因為前端限制可能被繞過。

表單若處理個人資料，還需要清楚告知蒐集目的、使用方式與保存原則，並採取適當的傳輸及存取保護。HTML 只負責建立欄位，完整安全性仍需要後端與網站政策配合。

HTML、CSS 與 JavaScript 的差異

HTML、CSS 與 JavaScript 是前端網頁的三項核心技術。HTML 定義內容，CSS 控制外觀，JavaScript 處理互動。將三者分開能讓程式碼更容易維護，也可避免把大量樣式與行為直接混入 HTML。

三項前端技術比較

技術	主要用途	常見工作
HTML	定義內容與結構	標題、段落、圖片、連結、表格、表單
CSS	控制樣式與版面	顏色、字型、間距、動畫、RWD
JavaScript	建立互動與邏輯	選單切換、資料驗證、動態載入、互動元件

只學 HTML 已經能製作資訊完整的靜態頁面，但若想設計具有品牌風格、手機版面與互動功能的網站，就需要繼續學習 CSS 和 JavaScript。

HTML 與 RWD 響應式網頁設計

RWD 是 Responsive Web Design 的縮寫，中文常稱為響應式網頁設計。它讓同一份頁面能依手機、平板與桌上型電腦的螢幕寬度調整版面。

HTML 負責建立可調整的內容結構，實際排列與斷點主要由 CSS 控制。頁面 <head> 中應加入 viewport 設定：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果缺少這項設定，手機瀏覽器可能以較寬的虛擬畫布呈現頁面，造成文字過小。CSS 則可使用彈性寬度、Flexbox、Grid 與媒體查詢改變排列方式。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

RWD 不只是把桌面版縮小。實務上還要確認文字是否容易閱讀、按鈕是否方便觸控、圖片是否超出畫面、表格是否可操作，以及鍵盤和螢幕閱讀器能否正常使用。

HTML 自學的正確順序

HTML 自學並不需要先具備程式背景。較有效率的方式是先理解文件結構，再練習常見標籤、語意化架構、表格、表單及無障礙設計，最後搭配 CSS 製作 RWD 頁面。

學習時不要只複製程式碼。每加入一個元素，就在瀏覽器觀察結果，並嘗試修改文字、屬性和巢狀位置。遇到問題時，可使用瀏覽器開發者工具檢查元素，也能透過 WHATWG HTML Living Standard、MDN Web Docs 與 W3C 驗證工具確認語法及標準。

初學者常見錯誤包括忘記結束標籤、巢狀順序錯誤、圖片路徑不正確、檔案其實仍是 .txt，以及把 CSS 屬性誤當成 HTML。養成縮排、使用小寫標籤、提供替代文字與定期驗證文件的習慣，能減少後續維護問題。

完成基礎練習後，可以製作個人介紹頁、文章頁或聯絡表單。練習內容可以自行撰寫，不必使用真實個人資料，也不要在公開儲存庫放入密碼、金鑰或其他敏感資訊。

結論

HTML 是所有網頁內容的基礎，透過標籤描述標題、段落、圖片、連結、表格與表單。理解 HTML 意思、知道 HTML 用什麼寫、掌握 HTML 怎麼開，以及熟悉 HTML 基本語法後，就能建立具有清楚結構的網頁。

HTML 本身不負責完整視覺設計與複雜互動，但它決定內容是否容易理解、維護及被輔助技術解析。HTML 自學應從正確結構與語意開始，再逐步加入 CSS、RWD 和 JavaScript，而不是只追求畫面效果。只要持續實作、使用官方文件查證並檢查程式碼，就能穩定建立網頁開發基礎。

常見問題

1. HTML 是程式語言嗎？

HTML 通常不被歸類為程式語言，而是標記語言。它用標籤描述網頁內容與結構，本身沒有一般程式語言常見的條件判斷、迴圈與資料運算能力。

2. 完全沒有程式基礎可以學 HTML 嗎？

可以。HTML 的起始門檻相對低，初學者只要會操作檔案、輸入文字及使用瀏覽器，就能建立第一個網頁。之後再逐步學習 CSS 與 JavaScript。

3. HTML 檔案為什麼打不開？

常見原因包括副檔名實際為 .txt、檔案路徑錯誤、沒有設定預設瀏覽器，或檔案內容及編碼異常。可先確認完整檔名，再用瀏覽器的開啟檔案功能選取。

4. HTML 可以使用中文嗎？

可以。建議在 <head> 中加入 <meta charset="UTF-8">，讓瀏覽器使用 UTF-8 編碼解析文件，降低中文出現亂碼的機會。

5. HTML 標籤一定要小寫嗎？

HTML5 的一般 HTML 語法對標籤大小寫較寬容，但實務上建議統一使用小寫，這是較常見且容易閱讀、維護的寫法。

6. HTML 可以直接製作手機版網頁嗎？

可以建立內容，但完整手機版面通常需要 CSS。HTML 應加入 viewport 設定，再使用媒體查詢、Flexbox 或 Grid 完成 RWD 排版。

7. div 和 section 有什麼不同？

div 是沒有特定語意的通用容器；section 代表具有主題的一組內容，通常會搭配標題。如果內容具有明確章節意義，應優先考慮 section。

8. src 是什麼？

src 是 source 的縮寫，用來指定外部資源位置，常見於 img、script、iframe、audio 與 video 等元素。路徑可以是相對路徑或完整網址。

9. 學 HTML 需要安裝伺服器嗎？

單純練習靜態 HTML 不需要伺服器，將檔案存好後即可用瀏覽器開啟。若要測試後端程式、表單提交、模組載入或部分瀏覽器安全限制，才可能需要本機或遠端伺服器。

10. 學會 HTML 後應該學什麼？

通常下一步是 CSS，學習顏色、間距、版面及 RWD；之後再學 JavaScript，建立互動功能。過程中也應持續補充 Git、瀏覽器開發者工具、網站效能、SEO 與網頁無障礙知識。