HTML 基本語法重點：先掌握網頁由標籤組成
HTML 基本語法的核心是用「標籤」描述網頁內容，例如標題、段落、圖片、連結、表格與表單。HTML 全名是 HyperText Markup Language，中文常稱為「超文本標記語言」，它不是一般意義上的程式語言，而是讓瀏覽器理解內容結構的標記語言。每個 HTML 元素通常由起始標籤、內容、結束標籤組成，例如 <p>這是一段文字</p>，其中 <p> 是起始標籤，</p> 是結束標籤，中間就是網頁要顯示的內容。
在 HTML5 中，標準網頁通常以 <!DOCTYPE html> 開頭，告訴瀏覽器這份文件使用 HTML5 規範。接著由 <html> 包住整份文件，<head> 放置網頁資訊，例如標題、字元編碼、SEO 描述與 CSS 連結；<body> 則放置使用者實際會看到的內容。只要理解這個 HTML 基本架構，就能開始撰寫最簡單的網頁。
HTML 基本架構：一個 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>
</head>
<body>
<h1>HTML 基本語法教學</h1>
<p>這是一個最基本的 HTML 範例。</p>
</body>
</html><!DOCTYPE html> 是文件類型宣告，代表使用 HTML5。<html lang="zh-Hant-TW"> 表示網頁主要語言為台灣繁體中文，有助於瀏覽器與搜尋引擎判斷內容語系。<meta charset="UTF-8"> 可避免中文亂碼，<meta name="viewport"> 則讓手機、平板等行動裝置能正確縮放頁面。
head 與 body 的差異
<head> 內的內容多半不會直接顯示在網頁畫面上，但會影響搜尋引擎、瀏覽器分頁標題、樣式載入與社群分享資訊。常見內容包含 <title>、<meta>、<link> 與 <script>。
<body> 則是網頁主體，使用者看到的文字、圖片、連結、按鈕、表單、選單、文章內容，大多都寫在 <body> 裡。學習 HTML 教學時，建議先把 head 與 body 分清楚，後續學 CSS 與 JavaScript 會更容易理解。
HTML 用什麼寫：常見 HTML 網頁編輯器比較
HTML 用什麼寫是初學者最常問的問題。其實 HTML 本質上是純文字檔案，所以只要能輸入文字並儲存為 .html，就能撰寫 HTML。Windows 記事本、macOS 文字編輯、VS Code、Notepad++、Sublime Text、WebStorm、CodePen、JSFiddle 等都可以使用。
不過，若要長期學習網頁設計，建議使用具備語法提示、縮排、檔案管理、即時預覽或擴充套件的 HTML 網頁編輯器，例如 Visual Studio Code。VS Code 免費、跨平台，支援 HTML、CSS、JavaScript，也能透過 Live Server 擴充套件即時預覽網頁。
HTML 網頁編輯器比較表
| 工具類型 | 常見工具 | 優點 | 適合對象 |
|---|---|---|---|
| 純文字編輯器 | 記事本、文字編輯 | 不需安裝複雜工具，能快速建立 HTML 檔案 | 完全初學者、臨時修改 |
| 程式碼編輯器 | VS Code、Sublime Text、Notepad++ | 有語法高亮、自動補全、檔案管理 | HTML/CSS 初學者到進階使用者 |
| 專業 IDE | WebStorm | 功能完整，適合大型前端專案 | 專業開發者、團隊專案 |
| 線上編輯器 | CodePen、JSFiddle、線上 HTML 編輯器 | 不需安裝，可即時預覽與分享 | 練習 HTML 範例、展示作品 |
| 所見即所得編輯器 | CKEditor 等 | 可視覺化編輯內容 | 內容管理、後台文章編輯 |
HTML 怎麼開：建立與開啟 HTML 檔案的方法
用瀏覽器開啟 HTML
HTML 怎麼開其實很簡單。先建立一個檔案，例如 index.html 或 basic.html，把 HTML 語法寫入後儲存。接著可以直接用滑鼠雙擊檔案，系統通常會用預設瀏覽器開啟。也可以在 Chrome、Edge、Firefox 或 Safari 中，使用「開啟檔案」功能選取 HTML 檔案。
如果你使用 VS Code，可以安裝 Live Server 擴充套件，在 HTML 檔案上按右鍵選擇「Open with Live Server」，瀏覽器就會自動開啟本機預覽頁面。修改內容後，畫面也能快速更新，這對學習 HTML 教學非常方便。
檔名與副檔名要注意
HTML 檔案副檔名應為 .html 或 .htm，目前最常用的是 .html。首頁檔案通常命名為 index.html，這是許多網站伺服器預設讀取首頁的慣例。初學時建議使用英文小寫檔名，避免空白與特殊符號，例如 about.html、contact.html，能減少跨平台或伺服器設定問題。
常用 HTML 基本語法與標籤
標題與段落
HTML 提供六層標題，從 <h1> 到 <h6>。<h1> 通常代表頁面最重要的主標題，一個頁面建議有明確主題；<h2>、<h3> 則用來建立內容層級。段落使用 <p>，適合放置一般文字內容。
<h1>HTML 基本語法</h1>
<h2>什麼是 HTML</h2>
<p>HTML 是一種用來建立網頁內容結構的標記語言。</p>連結與圖片
連結使用 <a> 標籤，圖片使用 <img> 標籤。<a> 的 href 屬性指定連結位置，<img> 的 src 屬性指定圖片路徑，alt 屬性提供圖片替代文字，對 SEO 與無障礙瀏覽都很重要。
<a href="https://www.w3.org/">前往 W3C 網站</a>
<img src="photo.jpg" alt="網頁設計示意圖片">清單與表格
清單可分為無序清單 <ul> 與有序清單 <ol>，每個項目使用 <li>。表格則由 <table>、<tr>、<th>、<td> 組成，適合呈現結構化資料。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<table>
<tr>
<th>語言</th>
<th>用途</th>
</tr>
<tr>
<td>HTML</td>
<td>建立內容結構</td>
</tr>
</table>HTML 顏色語法：文字、背景與色碼設定
HTML 顏色的常見表示方式
HTML 顏色語法常見表示方式包含顏色名稱、HEX 十六進位色碼、RGB 與 RGBA。顏色名稱例如 red、blue、black，直覺但可控性較低。HEX 色碼例如 #ff0000 代表紅色，#ffffff 代表白色，#000000 代表黑色。RGB 則使用紅、綠、藍三個數值，例如 rgb(255, 0, 0) 也是紅色。
早期 HTML 常見 <font color="red">文字</font> 的寫法，但 <font> 在 HTML5 中已不建議使用。現代網頁設計應使用 CSS 控制顏色，讓結構與樣式分離，維護性較好，也符合目前網頁標準。
使用 CSS 設定文字與背景顏色
<p style="color: #ff0000;">這段文字是紅色。</p>
<p style="background-color: #ffff00;">這段文字有黃色背景。</p>若要讓網站更易維護，建議把樣式集中寫在 <style> 或外部 CSS 檔案中：
<style>
.notice {
color: #ffffff;
background-color: #0057b8;
padding: 12px;
}
</style>
<p class="notice">這是一段有背景色的提示文字。</p>設定顏色時要注意文字與背景的對比，避免底色與字色過於接近造成閱讀困難。對比良好的文字不只提升使用者體驗，也有助於無障礙設計。
CSS 語法：HTML 負責結構，CSS 負責外觀
CSS 語法基本組成
CSS 是 Cascading Style Sheets 的縮寫，中文常稱為階層式樣式表。HTML 負責內容結構，CSS 負責外觀設計，例如顏色、字型、大小、間距、邊框、排版與響應式設計。基本 CSS 語法由選擇器、屬性與值組成。
p {
color: #333333;
font-size: 16px;
line-height: 1.8;
}在這段語法中，p 是選擇器，代表套用到所有 <p> 段落；color、font-size、line-height 是屬性；#333333、16px、1.8 是值。
CSS 三種寫法
CSS 可以寫在標籤的 style 屬性中，也可以寫在 HTML 文件的 <style> 裡，或獨立成外部 .css 檔案。初學練習時可先使用內嵌樣式，但正式網站建議使用外部 CSS，方便管理多頁樣式。
<link rel="stylesheet" href="style.css">外部 CSS 檔案 style.css 可寫成：
body {
font-family: Arial, "Noto Sans TC", sans-serif;
color: #222;
background-color: #f8f8f8;
}
h1 {
color: #0057b8;
}SEO 角度看 HTML 基本語法
語意化標籤有助搜尋引擎理解內容
現代 HTML 教學不應只教會「畫面能顯示」，也要重視語意化。語意化標籤包含 <header>、<nav>、<main>、<article>、<section>、<footer> 等。這些標籤能讓瀏覽器、搜尋引擎與輔助工具更清楚理解頁面區塊用途。
<main>
<article>
<h1>HTML 基本語法教學</h1>
<p>這篇文章介紹 HTML 基本結構與常用標籤。</p>
</article>
</main>搜尋引擎重視內容品質、頁面結構、可讀性與使用者體驗。正確使用標題層級、替圖片加上有意義的 alt、避免空連結、使用清楚的連結文字，都能提升網頁品質。
title 與 meta description 的重要性
<title> 會顯示在瀏覽器分頁，也常被搜尋引擎作為搜尋結果標題的重要參考。meta description 則可提供頁面摘要，雖然不一定直接決定排名，但會影響使用者是否點擊。
<title>HTML 基本語法教學：從 HTML 基本架構到 CSS 語法</title>
<meta name="description" content="完整介紹 HTML 基本語法、HTML 怎麼開、HTML 用什麼寫、HTML 顏色語法與 CSS 語法，適合網頁初學者。">初學者可直接練習的完整 HTML 範例
包含 HTML、CSS 與顏色設定的範例
以下 HTML 範例整合 HTML 基本架構、CSS 語法、文字顏色、背景色、標題、段落與連結，適合複製到 index.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>
<style>
body {
font-family: Arial, "Noto Sans TC", sans-serif;
margin: 40px;
color: #222222;
background-color: #f5f7fa;
}
h1 {
color: #0057b8;
}
.card {
background-color: #ffffff;
border: 1px solid #dddddd;
padding: 20px;
border-radius: 8px;
}
a {
color: #d35400;
}
</style>
</head>
<body>
<main class="card">
<h1>HTML 基本語法練習</h1>
<p>這是一個包含 HTML 與 CSS 的基本網頁。</p>
<p>你可以修改文字、顏色與連結，觀察瀏覽器中的變化。</p>
<a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML">學習更多 HTML 文件</a>
</main>
</body>
</html>建議初學者不要只複製範例，而是逐行觀察每個標籤的作用。例如刪除 <style> 後畫面會變得樸素，修改 color 色碼後文字顏色會改變，這種實作觀察比單純背語法更有效。
結論：學會 HTML 基本語法後，就能建立可維護的網頁
HTML 基本語法的學習順序建議從 HTML 基本架構開始，再了解常用標籤、屬性、HTML 顏色語法與 CSS 語法。當你知道 HTML 用什麼寫、HTML 怎麼開，也能使用合適的 HTML 網頁編輯器，就可以快速建立並預覽自己的第一個網頁。
對初學者來說，HTML 最重要的不是一次記住所有標籤，而是理解「結構」與「語意」。HTML 負責內容，CSS 負責樣式，JavaScript 才負責互動。只要打好 HTML 與 CSS 基礎，後續學習響應式網頁、前端框架或網站 SEO，都會更順利。
常見問題
1. HTML 是程式語言嗎？
HTML 不是傳統程式語言，而是標記語言。它主要用來描述網頁內容結構，例如標題、段落、圖片、連結與表格。
2. 學 HTML 需要先會程式設計嗎？
不需要。HTML 很適合零基礎學習者入門，只要會使用電腦建立檔案、輸入文字並用瀏覽器開啟，就能開始練習。
3. HTML 用什麼寫最推薦？
最推薦初學者使用 VS Code，因為它免費、跨平台、支援語法高亮、自動補全與擴充套件，也能搭配 Live Server 即時預覽。
4. HTML 怎麼開？
把檔案儲存為 .html，例如 index.html，再用瀏覽器開啟即可。也可以在 VS Code 中使用 Live Server 預覽。
5. HTML 檔案一定要叫 index.html 嗎？
不一定，但網站首頁常使用 index.html，因為許多伺服器會預設讀取這個檔名作為首頁。
6. HTML 顏色語法應該用 font 標籤嗎？
不建議。<font> 是舊式寫法，HTML5 中應使用 CSS 設定顏色，例如 color: #ff0000; 或 background-color: #ffffff;。
7. CSS 和 HTML 有什麼差別？
HTML 負責網頁內容與結構，CSS 負責外觀與排版。簡單來說，HTML 決定「有什麼內容」，CSS 決定「看起來如何」。
8. 初學者要先學 HTML 還是 CSS？
建議先學 HTML 基本結構與常用標籤，再學 CSS。兩者通常會一起使用，但 HTML 是網頁內容的基礎。
9. 線上 HTML 網頁編輯器適合學習嗎？
適合。CodePen、JSFiddle 等線上工具可以即時預覽 HTML、CSS 與 JavaScript，適合練習小範例與分享作品。
10. 學會 HTML 基本語法後下一步是什麼？
下一步可學 CSS 排版、響應式設計、JavaScript 互動，以及 SEO 基礎。若想建立完整網站，也可以進一步了解網站部署與網域設定。