html語法入門教學：從網頁架構到常用 HTML 標籤

HTML 語法是什麼？它負責網頁的哪一部分

HTML 是用來描述網頁內容結構的標記語言，負責告訴瀏覽器「這段是標題、這段是段落、這裡有連結、這裡是表格或表單」。它不是程式語言，因為 HTML 本身不負責運算邏輯，而是把內容標記成瀏覽器看得懂的結構。

可以把 HTML 想成一間房子的骨架：牆面、門窗、房間位置先定義好，後續 CSS 才負責外觀，JavaScript 才負責互動。新手常犯的第一個錯，是還沒分清楚三者責任，就急著把樣式、互動、資料處理全部混在同一個檔案裡。

• HTML 的用途是建立網頁結構，例如標題、段落、圖片、連結、清單。
• HTML 的核心單位是 HTML 標籤與元素，例如 <h1>、<p>、<a>。
• HTML 會被瀏覽器解析，再顯示成使用者看得到的網頁內容。

HTML、CSS、JavaScript 的分工差在哪裡

HTML 負責內容結構，CSS 負責視覺樣式，JavaScript 負責互動行為。三者常一起出現在同一個網站，但學習順序建議先從 HTML 語法開始，因為它是頁面內容的基礎。

技術	主要用途	例子
HTML	定義內容與結構	標題、段落、連結、表格
CSS	控制外觀與版面	顏色、字體、間距、排版
JavaScript	處理互動與狀態	按鈕點擊、表單檢查、動態內容

為什麼瀏覽器看得懂 HTML

瀏覽器內建 HTML 解析能力，會讀取 HTML 文件中的標籤、屬性和內容，轉換成頁面結構後顯示給使用者。只要語法符合基本規則，多數瀏覽器都能理解並呈現內容。

這也是我建議新手先學正確結構的原因：畫面能顯示不代表寫法好，錯誤巢狀、缺少語意或亂用標籤，後面通常會讓 SEO、維護和無障礙一起變差。

一個 HTML 網頁的基本文件架構

一個最基本的 HTML 文件通常由 <!DOCTYPE html>、<html>、<head> 和 <body> 組成。head 放頁面設定，body 放使用者實際看得到的內容。

最小可用 HTML 範例

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
  <meta charset="UTF-8">
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>你好，HTML！</h1>
  <p>這是我的第一個 HTML 網頁。</p>
</body>
</html>

<!DOCTYPE html> 告訴瀏覽器使用現代 HTML 標準。lang="zh-Hant-TW" 表示頁面主要語言是台灣繁體中文。<meta charset="UTF-8"> 用來避免中文亂碼。<title> 是瀏覽器分頁標題，也可能被搜尋引擎拿來理解頁面主題。

head 和 body 差在哪裡

head 放的是頁面資訊與設定，例如標題、編碼、描述、樣式檔引用；body 放的是網頁可見內容，例如標題、文章、連結、表單。

<head>
  <title>頁面標題</title>
  <meta charset="UTF-8">
</head>
<body>
<h1>使用者會看到這個標題</h1>
</body>

為什麼要寫 meta charset="UTF-8"

UTF-8 是常用的文字編碼設定，能正確處理繁體中文、英文、數字與多數符號。台灣網站如果少了這行，在某些環境下可能會出現中文亂碼。

這行不難，但很常被新手漏掉。我會把它當成 HTML 基本架構的一部分，而不是可有可無的補充。

HTML 元素、標籤、內容和屬性的關係

HTML 元素通常由起始標籤、內容、結束標籤組成，屬性則寫在起始標籤內，用來補充這個元素的設定。理解這個結構後，大多數 HTML 標籤都能用同一套邏輯看懂。

什麼是起始標籤與結束標籤

起始標籤代表元素開始，結束標籤代表元素結束，中間是內容。

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

在這個例子中，<p> 是起始標籤，這是一段文字。 是內容，</p> 是結束標籤，整體合起來就是一個段落元素。

什麼是 HTML 屬性

HTML 屬性寫在起始標籤內，用來提供額外資訊。以連結為例，href 屬性用來指定連到哪個網址。

<a href="https://makewebsites.tw">前往網站</a>

拆開來看，a 是 HTML 標籤，href 是屬性，https://makewebsites.tw 是屬性值，前往網站 是連結文字。

部分	意思	範例
標籤名稱	決定元素類型	a
屬性	補充元素設定	href
屬性值	屬性的具體內容	https://makewebsites.tw
內容	使用者看到的文字	前往網站

空元素是什麼，例如 img、br、input

空元素是不需要包住文字內容的元素，通常只有起始標籤與屬性，例如圖片、換行、輸入欄位。

<img src="logo.png" alt="網站標誌">
<br>
<input type="email" name="email">

img 透過 src 指定圖片路徑，透過 alt 提供替代文字。br 只做換行，不能拿來排整個版面。input 常用在表單欄位。

最常用的 HTML 標籤整理

新手不需要一開始背完所有 HTML 標籤，先掌握標題、段落、連結、圖片、清單、強調與容器標籤，就能寫出大部分基本網頁內容。

文字與標題標籤：h1 到 h6、p

標籤	用途	範例
h1	頁面主標題，通常一頁一個主要 H1	<h1>HTML 語法入門</h1>
h2	主要段落標題	<h2>基本架構</h2>
h3	H2 底下的小節標題	<h3>常用標籤</h3>
p	段落文字	<p>這是一段說明文字。</p>

連結與圖片標籤：a、img

a 用來建立連結，img 用來嵌入圖片。連結要有清楚文字，圖片要有有意義的 alt。

<a href="/posts/html-syntax">閱讀 HTML 語法教學</a>
<img src=“/assets/html-example.png” alt=“HTML 文件結構範例”>

連結文字不要只寫「點這裡」，應該讓使用者看文字就知道會前往哪裡。圖片的 alt 也不要塞關鍵字，應該描述圖片內容或功能。

清單標籤：ul、ol、li

ul 是無順序清單，ol 是有順序清單，li 是每一個清單項目。

<ul>
  <li>學 HTML 基本架構</li>
  <li>練習常用標籤</li>
  <li>檢查語法錯誤</li>
</ul>

文字強調：strong、em

strong 表示重要內容，em 表示語氣上的強調。它們不是單純拿來變粗或變斜的裝飾標籤。

<p><strong>HTML 標籤要正確巢狀。</strong></p>
<p>這個欄位<em>建議填寫</em>，但不是必填。</p>

區塊容器：div、span

div 是區塊容器，span 是行內容器，常用來包住一段內容方便套樣式或操作。不過 div 不是萬用解法；如果內容本身有明確語意，優先考慮 header、nav、main、article、section 這類語意標籤。

<div class="card">
  <h2>文章標題</h2>
  <p>文章摘要內容。</p>
</div>
<p>這是一段含有 <span class=“highlight”>重點文字</span> 的段落。</p>

表格與表單的基本 HTML 語法

表格適合呈現列與欄的資料，表單適合讓使用者輸入資料。這兩類 HTML 語法很常見，但也最容易因為結構偷懶而影響可讀性與無障礙。

表格基本範例

HTML 表格由 table、tr、th、td 組成。tr 是列，th 是標題儲存格，td 是一般儲存格。

<table>
  <thead>
    <tr>
      <th>標籤</th>
      <th>用途</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>h1</td>
      <td>頁面主標題</td>
    </tr>
    <tr>
      <td>p</td>
      <td>段落文字</td>
    </tr>
  </tbody>
</table>

表單基本範例

HTML 表單通常由 form、label、input、button 組成。下面是基本的電子信箱欄位範例。

<form action="/subscribe" method="post">
  <label for="email">電子信箱</label>
  <input id="email" name="email" type="email">
  <button type="submit">送出</button>
</form>

action 代表表單送出的目標，method 代表送出方式。本文只處理 HTML 結構，不展開後端接收資料的流程。

為什麼表單欄位要搭配 label

label 可以讓欄位名稱與輸入欄位建立關聯，使用者點擊文字時也能聚焦到欄位，對鍵盤操作與輔助工具更友善。

<label for="name">姓名</label>
<input id="name" name="name" type="text">

for="name" 對應到 input 的 id="name"。這種小地方常被忽略，但真正做網站時會影響可用性。

從 0 建立第一個 index.html

建立第一個 HTML 網頁只需要一個文字編輯器、一個副檔名為 .html 的檔案，以及瀏覽器。把基本架構寫進 index.html 後，直接用瀏覽器開啟就能看到結果。

建立 index.html

先建立一個資料夾，裡面新增檔案並命名為 index.html。index.html 常被當作網站首頁檔名，許多伺服器或靜態網站工具會優先尋找這個檔案。

1. 新增一個資料夾，例如 my-first-page。
2. 在資料夾中新增 index.html。
3. 用文字編輯器打開這個檔案。

貼上完整 HTML 範例

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
  <meta charset="UTF-8">
  <title>我的第一個 HTML 網頁</title>
</head>
<body>
  <h1>我的第一個 HTML 網頁</h1>
  <p>我正在練習 HTML 語法。</p>
<h2>今天學到的內容</h2>
<ul>
<li>HTML 是標記語言</li>
<li>HTML 用標籤描述網頁結構</li>
<li>index.html 是常見首頁檔名</li>
</ul>
<a href=“https://makewebsites.tw”&gt;回到 makewebsites.tw</a>
</body>
</html>

用瀏覽器開啟並檢查結果

存檔後，直接用瀏覽器開啟 index.html。如果看到標題、段落、清單和連結，代表 HTML 文件已經可以正常解析。

修改文字後記得重新整理瀏覽器。這個練習看起來很小，但它會讓你真正理解 HTML 語法和畫面結果之間的關係。

HTML 語法怎麼寫才正確：格式規範檢查清單

正確的 HTML 語法不只要能顯示，還要容易閱讀、容易維護，並且讓瀏覽器、搜尋引擎與輔助工具都能穩定理解。新手可以先用小寫標籤、屬性加引號、正確巢狀、設定語系與 UTF-8 這幾項檢查。

標籤建議全部小寫

HTML 標籤建議使用小寫，這是現代 HTML 文件中較一致、可維護的寫法。

<h1>正確且一致的寫法</h1>
<p>段落內容</p>

屬性值建議加上引號

屬性值建議使用雙引號包起來，避免空白或特殊字元造成解析問題。

<a href="/posts/html-syntax">HTML 語法教學</a>
<input type="email" name="email">

注意縮排與巢狀順序

巢狀元素要先開後關，縮排則幫助人閱讀。語法錯誤常不是因為標籤不會用，而是結束標籤放錯位置。

<article>
  <h2>文章標題</h2>
  <p>這是一段文章內容。</p>
</article>

判斷性地說，縮排不是給瀏覽器看的，是給未來的自己看的。當頁面變長，乾淨縮排會直接降低維護成本。

檔名、.html 與 index.html

HTML 檔案通常使用 .html 副檔名。首頁檔名常用 index.html，因為許多網站環境會把它視為預設首頁。

• 建議：index.html
• 可讀性佳：about.html、contact.html
• 不建議：新增文字文件.html.txt

台灣繁中頁面可使用 lang="zh-Hant-TW"

台灣繁體中文頁面可在 html 標籤上設定 lang="zh-Hant-TW"，協助瀏覽器、搜尋引擎與輔助工具判斷語言。

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

檢查項目	建議寫法	原因
標籤大小寫	使用小寫	一致、易讀、符合常見現代寫法
屬性值	加上雙引號	降低解析錯誤機率
文字編碼	UTF-8	避免繁中內容亂碼
語系	zh-Hant-TW	標示台灣繁體中文內容
巢狀	先開後關	避免結構混亂

現代 HTML5 與不建議再使用的舊語法

現代 HTML5 強調內容語意與結構清楚，樣式應交給 CSS 處理。像 font、center、marquee 這類舊寫法不建議再用於新網站。

不建議使用的舊標籤與屬性

不要這樣寫	問題	建議這樣處理
<font>	把外觀樣式塞進 HTML	用 CSS 控制字體、大小、顏色
<center>	只處理視覺置中，缺乏結構語意	用 CSS 控制對齊
<marquee>	跑馬燈效果干擾閱讀，也不利維護	避免使用，必要互動交給 CSS 或 JavaScript
bgcolor	把背景顏色寫在 HTML 屬性中	用 CSS 管理樣式

樣式交給 CSS，不要塞進 HTML

HTML 應該優先描述內容結構，顏色、字體、間距、版面排列交給 CSS。這樣做的好處是結構更乾淨，未來調整樣式時也不必到處改 HTML。

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

這裡 HTML 只標出這段文字是提醒內容，至於提醒內容要用什麼顏色和間距，應交由 CSS 決定。

什麼是語意化 HTML

語意化 HTML 是用符合內容意義的標籤描述頁面，例如用 nav 表示導覽，用 main 表示主要內容，用 article 表示可獨立閱讀的文章。

<main>
  <article>
    <h1>HTML 語法入門</h1>
    <p>這是一篇介紹 HTML 基礎的文章。</p>
  </article>
</main>

我的看法是，新手可以先會用 div，但不能停在只會用 div。語意標籤會讓網站更像一份清楚的文件，而不只是堆疊出來的畫面。

HTML 和 SEO、可讀性、無障礙的關係

HTML 會影響搜尋引擎與輔助工具理解頁面的方式。正確使用 title、標題階層、圖片 alt、語意標籤與內部連結，能提升內容可讀性與網站維護品質。

title、meta description 和搜尋結果

title 是頁面的標題資訊，搜尋引擎可能用它作為搜尋結果標題的參考。meta description 則提供頁面摘要，也可能被搜尋結果採用或改寫。

<head>
  <title>HTML 語法入門：基本架構與常用標籤</title>
  <meta name="description" content="從 HTML 基本架構、常用標籤、屬性到新手常見錯誤，整理適合台灣讀者的 HTML 語法入門教學。">
</head>

不要把 title 寫成一串關鍵字。好的標題應該讓人看得懂頁面主題，也讓搜尋引擎能判斷內容重點。

h1-h6 標題階層不要亂跳

標題階層代表內容結構。h1 通常是頁面主題，h2 是主要段落，h3 是段落下的小節。不要只因為字體大小而亂選標籤。

<h1>HTML 語法入門</h1>
<h2>HTML 基本架構</h2>
<h3>head 和 body 的差別</h3>

標題亂跳會讓內容輪廓變得難讀。對長文、教學文、SEO 文章來說，標題階層是資訊架構，不只是排版工具。

圖片 alt 不只是 SEO，也影響無障礙

alt 是圖片替代文字，當圖片無法載入或使用者透過輔助工具閱讀頁面時，alt 能提供圖片內容或功能說明。

<img src="/assets/html-structure.png" alt="HTML 文件由 doctype、head 和 body 組成的結構示意">

如果圖片只是裝飾，處理方式會不同；如果圖片承載資訊，alt 就應該描述重點。把 alt 當成關鍵字欄位硬塞，反而會讓內容品質下降。

nav、main、article、section 的語意

語意標籤能讓頁面區塊更清楚。nav 表示導覽，main 表示主要內容，article 表示文章或獨立內容，section 表示主題區段。

<nav>
  <a href="/">首頁</a>
  <a href="/posts">文章</a>
</nav>
<main>
<article>
<h1>HTML 語法入門</h1>
<section>
<h2>HTML 基本架構</h2>
<p>HTML 文件有固定的基本組成。</p>
</section>
</article>
</main>

網站經營者不必把 HTML 學到工程師等級，但至少要看得懂標題、連結、圖片替代文字和主要內容區塊。這些基礎會直接影響內容是否容易被理解、維護和擴充。

HTML 新手常見錯誤與排查方法

HTML 出錯時，優先檢查結尾標籤、巢狀順序、檔案路徑、文字編碼、屬性名稱和副檔名。多數新手問題都不是複雜技術，而是基本結構或路徑寫錯。

圖片不顯示

圖片不顯示最常見原因是路徑錯誤、檔名大小寫不一致、檔案不在指定位置，或圖片檔本身不存在。

中文變亂碼

中文亂碼通常是沒有設定 UTF-8，或檔案儲存編碼和 HTML 宣告不一致。先確認 head 裡有 <meta charset="UTF-8">。

連結打不開

連結打不開通常是 href 寫錯、相對路徑判斷錯誤，或網址少了必要的路徑。站內連結要確認目標檔案真的存在。

標籤文字直接出現在畫面上

如果 <h1> 這類文字直接出現在畫面上，可能是標籤被轉義成純文字、檔案副檔名不是 .html，或你把 HTML 貼到不會解析 HTML 的地方。

版面跑掉是不是 HTML 的問題

版面跑掉不一定是 HTML 的問題，也可能是 CSS 造成。不過排查時應先確認 HTML 結構正確，尤其是標籤有沒有關閉、巢狀有沒有錯。

現象	可能原因	修法
圖片不顯示	路徑或檔名錯誤	確認 src、資料夾位置與檔名
中文亂碼	未設定 UTF-8	加入 <meta charset="UTF-8">
連結無效	href 路徑錯誤	檢查站內路徑或完整網址
標籤顯示成文字	檔案不是 HTML 或標籤被轉義	確認副檔名與貼上位置
區塊位置異常	巢狀錯誤或 CSS 影響	先修 HTML 結構，再檢查 CSS

學完 HTML 語法後，下一步該學什麼

學完 HTML 語法後，下一步可以先補 CSS，再學 JavaScript。網站經營者則應至少理解 HTML 標籤、標題階層、連結、圖片 alt 與基本語意結構。

先補 CSS，再學 JavaScript

HTML 建立內容結構後，CSS 會讓你控制字體、顏色、間距與版面。等到能穩定寫出結構清楚的頁面，再學 JavaScript 互動會更順。

這個順序對大多數自學者比較實際：先讓頁面有正確內容，再讓它好看，最後才讓它動起來。

為什麼懂 HTML 有助於理解 CSS selector

CSS selector 會根據 HTML 標籤、class、id、屬性與層級關係選取元素。懂 HTML 結構，才知道 CSS 為什麼會選到某段內容，也比較容易排查樣式沒有生效的原因。

<article class="post">
  <h1>HTML 語法入門</h1>
  <p>這是一段文章內容。</p>
</article>

在這個結構中，CSS 可以選取 .post、.post h1 或 .post p。如果 HTML 結構混亂，CSS 也會跟著難維護。

網站經營者至少要懂哪些 HTML 基礎

網站經營者不必背所有 HTML 標籤，但應該看得懂 title、meta description、h1-h6、a、img、alt、nav、main、article 這些基礎。這些語法會影響網站內容結構、內部連結、SEO 基礎和可維護性。

後續可以延伸學習網站架設、SEO 基礎、網站內容結構與 Core Web Vitals，但不要把所有主題一次混在 HTML 入門階段。先把 HTML 寫穩，後面才不會一直回頭補洞。

HTML 語法是程式語言嗎？

HTML 不是程式語言，而是標記語言。它負責描述網頁內容結構，例如標題、段落、連結和表格，不負責條件判斷、迴圈或資料運算。

HTML 和 HTML5 有什麼差別？

HTML 是網頁標記語言的總稱，HTML5 是現代 HTML 標準語境，加入更多語意標籤與多媒體支援，也讓文件宣告更簡潔。新網站通常直接使用 HTML5 寫法。

HTML 標籤大小寫有差嗎？

在一般 HTML 文件中，瀏覽器多半能解析大寫或小寫標籤，但現代寫法建議全部使用小寫。小寫標籤更一致，也比較容易閱讀與維護。

head 裡面的內容會顯示在網頁上嗎？

head 裡的內容通常不會直接顯示在頁面主畫面上，它主要放頁面設定，例如 title、meta charset、meta description 和樣式檔引用。

為什麼很多 HTML 範例都叫 index.html？

index.html 是常見首頁檔名。許多網站環境會把資料夾中的 index.html 當作預設開啟頁面，所以入門範例常用這個名稱。

學 HTML 需要背所有標籤嗎？

不需要。新手先掌握文件架構、標題、段落、連結、圖片、清單、表格、表單和語意標籤即可。遇到較少用的標籤，再查文件會比較有效率。

圖片不顯示通常是哪裡寫錯？

最常見是 src 路徑錯誤、檔名拼錯、大小寫不一致、圖片放錯資料夾，或圖片檔不存在。先從路徑與檔名檢查最快。

中文網頁為什麼要設定 UTF-8？

UTF-8 能正確處理繁體中文與多數常見字元。HTML 文件中設定 <meta charset="UTF-8">，可以降低中文亂碼的機率。

HTML 的 alt 屬性對 SEO 有幫助嗎？

alt 可以協助搜尋引擎與輔助工具理解圖片內容，但它不該被拿來堆關鍵字。好的 alt 應該描述圖片本身的內容或功能。

可以用線上編輯器測試 HTML 語法嗎？

可以。線上編輯器很適合快速測試 HTML 片段。不過新手也應該練習建立本機 index.html，因為這能幫助你理解檔案、路徑與瀏覽器開啟結果的關係。

學 HTML 對 CSS selector 或爬蟲有幫助嗎？

有幫助。CSS selector 會依照 HTML 標籤、class、id、屬性與層級選取元素；爬蟲理解頁面時，也會受到標題、連結、語意標籤與內容結構影響。

現在還可以用 font、center、marquee 嗎？

不建議在新網站使用。這些屬於舊式或不合現代維護習慣的寫法。字體、顏色、置中與動態效果應交給 CSS 或合適的互動技術處理。