打開記事本，打了幾行字，存成 index.html，滿心期待雙擊打開會看到一個「網頁」——結果瀏覽器不是顯示空白，就是把你寫的東西原封不動印成一行醜醜的純文字。很多人第一次寫 HTML 都卡在這一步：明明照著範例打了，畫面卻不對。問題通常不是你打錯字，而是少了一副「骨架」——瀏覽器要看到完整的骨架才知道怎麼把內容畫出來。
這篇文章就是要把這副骨架講清楚，再帶你認識 10 個寫網頁天天會用到的標籤，看完你就能自己生出一個能打開、能看的網頁。
HTML 不是「寫程式」，是「幫內容貼標籤」
很多人聽到 HTML 會直覺聯想到程式語言，但 HTML 全名是 HyperText Markup Language，重點在 Markup（標記）——它不判斷、不運算、不寫迴圈，工作只有一件事：告訴瀏覽器「這段文字是標題」「這段是段落」「這裡放一張圖」。瀏覽器讀到標籤，就照標籤的意思把內容畫出來。
標籤長什麼樣子？一個標籤通常要「開」也要「關」，像這樣：
<p>這是一段文字</p><p> 是開始標籤，</p> 是結束標籤（多了一個斜線），中間夾的內容就是這個標籤要管的範圍。這個「成對出現」的規則要先記住，後面所有標籤都照這個邏輯來。
網頁的最小骨架
每個網頁檔案，不管內容多複雜，都是從同一副骨架長出來的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>這是我的第一個網頁。</p>
</body>
</html>把這幾行存成 index.html（副檔名一定要是 .html），雙擊用瀏覽器打開，就會看到一個大標題「Hello, World!」和底下一行小字。逐行拆開看：
<!DOCTYPE html>告訴瀏覽器「這是一份 HTML 文件」，永遠放在第一行。
10 個最常用標籤
骨架搭好之後，<body> 裡面能用的標籤非常多，但真正天天會用到的，先記這 10 個就夠應付大部分網頁：
1. `<h1>` ~ `<h6>` 標題：數字越小字級越大、層級越高，<h1> 通常一頁只用一次當主標題，<h2>、<h3> 拿來分小節。
2. `<p>` 段落：一般文字內容的容器，瀏覽器會自動在段落上下留白。
3. `<a>` 超連結：用 href 屬性指定要連去哪裡，例如 <a href="https://example.com">連結文字</a>。
4. `<img>` 圖片：用 src 指定圖片路徑，這個標籤沒有結束標籤（自己就是完整的一個標籤）。
5. `<ul>` / `<ol>` / `<li>` 清單：<ul> 是無序清單（點狀）、<ol> 是有序清單（數字），裡面每一項都要用 <li> 包起來。
6. `<strong>` / `<em>` 語意強調：<strong> 代表「重要」、<em> 代表「語氣強調」，瀏覽器預設會分別顯示成粗體和斜體，但重點是語意而不是外觀——單純想要粗體效果，用 CSS 處理會更正確。
7. `<div>` 容器：沒有任何語意，單純用來把一整塊內容框起來，方便之後排版或套樣式。
8. `<span>` 行內容器：跟 <div> 概念一樣，差別是 <span> 不會自動換行，用在一段文字裡框住某幾個字。
9. `<br>` 換行：在文字中間強制斷行，沒有結束標籤。
10. `<hr>` 分隔線：畫一條水平線，通常用來分隔不同區塊，也沒有結束標籤。
把這 10 個標籤湊起來，就能寫出一個像樣的自我介紹頁：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的自我介紹</title>
</head>
<body>
<h1>嗨，我是阿凱！</h1>
<p>我正在學 <strong>HTML</strong>，這是我寫的第一個網頁。</p>
<hr>
<h2>我的興趣</h2>
<ul>
<li>看電影</li>
<li>寫程式</li>
<li>打籃球</li>
</ul>
<p>
歡迎追蹤我的 <a href="https://example.com" target="_blank">部落格</a>，
也可以看看我的照片：
</p>
<img src="me.jpg" alt="阿凱的自我介紹照">
</body>
</html>新手最常踩的 5 個坑
寫到這裡，你已經知道網頁該長什麼樣子，但真正上手時最容易卡關的通常是這幾件事：
1. 把要顯示的內容打進 `<head>`——前面提過，這是最常見的第一個坑，畫面永遠不會出現。
2. 忘了關閉標籤，或標籤交叉嵌套。標籤巢狀要「先開後關」，像俄羅斯套娃一層包一層。下面這段就是錯誤示範，<b> 和 <i> 交叉了：
``html
<!-- 錯誤：交叉嵌套，順序亂掉 -->
<b><i>這段文字會跑版</b></i>
<!-- 正確：後開的先關 -->
<b><i>這段文字沒問題</i></b>
``
交叉嵌套不一定會讓瀏覽器直接壞掉，但排版行為會變得不可預期，養成「後開先關」的習慣就不會出這種問題。
3. 屬性值忘記加引號，例如寫成 <a href=https://example.com>。這種寫法有些瀏覽器還是勉強看得懂，但只要網址裡有空格或特殊字元就會整個壞掉，屬性值一律加雙引號比較保險。
4. 中文變成亂碼——通常是漏了 <meta charset="UTF-8">，這行一定要放在 <head> 裡的前幾行。
5. 圖片顯示不出來——多半是 src 路徑寫錯，記得確認圖片檔案真的放在你指定的相對路徑上。
小結
HTML 的核心觀念其實只有三個：它是「標記」不是「程式」；標籤要成對、巢狀要先開後關；網頁固定分成「骨架＋看得見的內容」兩層，head 是幕後、body 才是畫面。剩下的標籤都是查表就會的事，不用死背，寫多了自然記得住。
把上面的自我介紹範例存成 index.html，用瀏覽器打開看看效果，再試著改成你自己的內容——這是踏入前端世界最快的一步。如果想從 HTML 一路學到 CSS 排版、JavaScript 互動，最後做出一個能實際運作的網頁小工具，可以參考「Web 前端基礎」這門課，從這篇的骨架繼續往下打地基。