打開記事本，打了幾行字，存成 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 文件」，永遠放在第一行。<html>是整個網頁的最外層容器，所有內容都包在裡面。<head>放「瀏覽器要用、但不會直接畫在畫面上」的資訊，例如<meta charset="UTF-8">（宣告文字編碼，中文網頁少了這行常常會變亂碼）跟<title>（網頁標題）。<body>放「使用者實際看得到」的所有內容。
新手最容易搞混的一點就是 head 和 body 的差別：把 <title>我的網頁</title> 打進 <head> 裡，畫面上是完全看不到這行字的——它只會出現在瀏覽器分頁的標籤上。如果你發現「我明明打了字，畫面上卻沒出現」，先檢查是不是打錯位置，放進 head 裡了。反過來，body 裡的每一行都會被畫出來，這裡才是「畫面」。
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>這裡有兩個小細節值得留意：<a> 標籤加了 target="_blank"，代表點下去會開新分頁，不會把使用者帶離你正在看的這一頁；<img> 加了 alt，這是描述圖片內容的文字，圖片載入失敗時會顯示這段文字代替，對搜尋引擎和螢幕報讀軟體（無障礙）也很重要——養成「img 一定加 alt」的習慣，從第一天寫網頁就開始比較好。
新手最常踩的 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 前端基礎」這門課，從這篇的骨架繼續往下打地基。