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

文件骨架

每一份 HTML 文件都有幾乎相同的外殼。骨架寫錯，瀏覽器仍會盡力顯示，但編碼、手機縮放、輔助科技朗讀語言都可能出問題。先把這份樣板背熟，比先背五十個標籤有用。

最小可用文件

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>課程筆記</title>
  </head>
  <body>
    <h1>今天要學的事</h1>
    <p>從文件骨架開始。</p>
  </body>
</html>

存成 index.html，用瀏覽器打開。分頁標題來自 <title>，頁面上看得見的字都在 <body> 裡。

每一行在做什麼

`<!DOCTYPE html>`

告訴瀏覽器用標準模式解析這份文件。少了它，舊瀏覽器可能進入怪異模式，版面計算會跟你預期不同。這行不是 HTML 元素，放在檔案最上面。

`<html lang="zh-Hant">`

根元素，整份文件都包在裡面。lang="zh-Hant" 宣告繁體中文，螢幕閱讀器會選對的語音，搜尋引擎也較能判斷語言。英文頁用 en，簡體中文常用 zh-Hans。

`<head>`

放不會直接畫在頁面上的詮釋資料（metadata）：

內容	作用
`<meta charset="utf-8">`	字元編碼。中文、表情符號都靠它，必須盡量放在 `head` 最前面。
`<meta name="viewport" ...>`	讓手機不要把頁面當成桌面版再縮小。沒有這行，手機常會顯示很小的桌面版面。
`<title>`	分頁標題、書籤名稱、搜尋結果標題。
`<link>`、`<script>`	之後才接 CSS 與 JavaScript。

head 裡也可以放頁面描述：

<meta name="description" content="HTML5 文件骨架與常用 metadata 說明。">

搜尋結果的摘要常常來自這一行。

`<body>`

使用者實際看到、聽到的內容都在這裡：標題、段落、圖片、表單。一份文件只能有一個 body。

元素與屬性再看一次

屬性永遠寫在開始標籤裡，名稱建議小寫，值用引號包起來：

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN</a>

href：要前往的網址。
target="_blank"：開新分頁。開新分頁時加上 rel="noopener"，避免新分頁透過 window.opener 操控原頁。

註解不會顯示在頁面上，用來留給自己或同事：

<!-- 主內容從這裡開始 -->

不要把機密寫進註解，任何人都能在「檢視原始碼」看到。

常見錯誤

忘了 charset：中文變成亂碼。
title 寫成頁面主標題的替代品：title 是分頁名稱；頁面上的主標題仍要用 h1。
把 CSS 外觀寫進 HTML 標籤當結構：例如用  或到處 style="color:red"。練習階段可以偶爾用 style 試顏色，正式內容請分開寫 CSS。
標籤沒有關好或交叉嵌套：重點 是錯的，必須先關內層再關外層。

寫完用 W3C Markup Validation Service 上傳檔案。Validator 會指出未宣告語言、缺編碼、標籤交叉等問題。