2025.12.24
/ 活動期間：[2025.12.24 ~
]
【內容】HTML 基礎知識介紹：標籤、結構與網頁原理一次搞懂
如果你想開始了解前端知識，這篇文章會是你的第一篇知識文。
HTML 是什麼？為什麼學好 HTML 能讓你寫出更好的網站？
HTML（HyperText Markup Language，超文本標記語言）是所有網頁的基礎骨架。它靠許多「標籤」（tags）來告訴瀏覽器，頁面上每一個內容是什麼。
你在網站上看到的標題、圖片、段落、按鈕、表格、影音、表單……通通都是由 HTML 描述並呈現。
瀏覽器讀取 HTML 文件後，把它們顯示成你看到的網頁畫面。
為了讓網頁更好看、更好用，通常會再搭配 CSS 設計版面與顏色，並用 JavaScript 加上互動效果。
學好 HTML 的原因非常簡單：
1. 它決定了「內容怎麼被搜尋引擎理解」
標題是否使用 <h1>、圖片是否有 alt、結構是否語意化，這些都直接影響 SEO。2. 它決定了網站能不能被輕鬆維護
結構清楚整齊的 HTML，讓後續的 CSS / JavaScript / 內容維護更容易。3. 它決定了可讀性與使用體驗
正確的 HTML 能讓內容對手機、平板、桌機都更友善，也對無障礙使用者（例如螢幕報讀器）更友善。4. 它是所有網頁前端技能的第一步
先理解 HTML，你才能順利往 CSS（外觀）、JavaScript（互動）與框架（React / Vue）升級，進一步瞭解前端知識。簡單來說：
HTML 是網站的語言，也是 SEO 與前端的根基。沒有打好 HTML 基礎，之後的技術會學得很吃力。
開始寫 HTML
要開始寫 HTML 其實非常容易，你只需要一個簡單的文字編輯器（例如 Notepad、Sublime Text、Visual Studio Code 等）就能立即動手嘗試。
如果想即時看到修改後的結果，也可以使用線上編輯器：
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
下面示範的是一個最基礎的 HTML 網頁結構範例（可直接複製使用）：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>我的網頁標題</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這裡是正文內容。</p>
</body>
</html>
1. <!DOCTYPE html>
告訴瀏覽器使用 HTML5 標準解析文件。如果沒有做檔案宣告，有些瀏覽器可能會不知道這是一份 Html 檔案。
2. <html>：整個網頁的根元素
<html> 是整個網頁的最外層容器，所有內容都必須放在它裡面。在 <html> 裡，最基本一定會包含兩個區塊：
- <head>：網頁的設定資訊
- <body>：實際顯示在畫面上的內容
<footer> 並不是 <html> 的必要直屬區塊，
它是放在 <body> 裡的「語意化區塊」，用來表示頁尾內容。
3. <head>：放置網頁的「設定資訊」
<head> 裡的內容不會直接顯示在頁面上，但對於 SEO、編碼正確性、樣式載入與效能都非常重要。
常見的 <head> 元素包含：
<meta charset="UTF-8">
→ 指定編碼格式，避免中文出現亂碼<title>
→ 顯示在瀏覽器分頁上的標題，也是 SEO 的重要元素<meta name="description">
→ 搜尋結果中可能顯示的頁面描述<link rel="stylesheet">
→ 引用外部 CSS 樣式檔案新手常見錯誤提醒：
如果 <meta>、<title> 或 <link> 標籤少打一個符號、沒有正確關閉，
可能會導致頁面跑版，甚至出現文字直接顯示在畫面最上方。
4. <body>：使用者實際看到的內容
標題、段落、圖片、表格、表單，可以說網頁的都放在這裡。懂了這四塊，你就能看懂 90% 的網頁 HTML。
5. <footer>：頁尾資訊（網站的收尾區塊）
<footer> 通常放在 <body> 的最下方，用來呈現補充資訊，例如：- 版權宣告
- 網站或公司名稱
- 聯絡資訊
- 相關連結（關於我們、隱私權政策等）
範例中只放一行版權文字，對新手來說已經是完全正確的寫法。
小總結
<!DOCTYPE html>：指定使用 HTML5<html>：整個網頁的外層容器
<head>：設定與 SEO 資訊
<body>：使用者實際看到的內容
<footer>：頁尾補充與收尾資訊
只要理解這五個區塊，你就已經能看懂超過 90% 的 HTML 網頁結構了。
最常用的 HTML 標籤一次整理
以下是網頁初學者與 SEO 最常使用、也最應該優先掌握的 HTML 標籤。只要熟悉這些標籤，就已經能完成大多數網站的基礎結構與內容呈現。
一、結構與標題標籤
| 標籤 | 功能說明 |
|---|---|
| <h1> ～ <h6> | 六個層級的標題標籤，用來定義內容結構。 對 SEO 非常重要，一個頁面通常只會有一個 <h1>。 |
| <p> | 段落文字，用來包住一般說明內容。 |
| <br> | 換行（僅換行，不代表新段落）。 |
標題標籤不只是字變大，而是用來告訴搜尋引擎「內容的層級關係」。
二、超連結與圖片
| 標籤 | 功能說明 |
|---|---|
| <a href=""> | 超連結標籤，可連到外部網站、內部頁面、錨點或下載檔案， 是網站導覽與 SEO 內外部連結的重要元素。 |
| <img src="" alt=""> | 圖片標籤，用來顯示圖片內容， alt 替代文字對 SEO 與無障礙（螢幕閱讀器）非常重要。 |
圖片一定要寫 alt，不只是給搜尋引擎，也是給圖片無法顯示或輔助工具使用者閱讀。
三、列點清單
| 標籤 | 功能說明 |
|---|---|
| <ul><li> | 無序清單（點點列表），適合用於條列重點、特色說明或不需順序的項目列表。 |
| <ol><li> | 有序清單（數字或順序列表），適合用於步驟說明、流程教學或有前後順序的內容。 |
- 功能條列
- 步驟說明
- 重點整理
四、內容區塊分類（語意化標籤）
| 標籤 | 功能說明 |
|---|---|
| <header> | 頁首區域，通常放置網站標題、Logo、主視覺或頁面標頭內容。 |
| <nav> | 導覽選單區塊，用來包住主要或次要的網站導覽連結。 |
| <section> | 一段主題相關的內容區塊，通常會搭配標題標籤（如 <h2>）。 |
| <article> | 可獨立存在的內容單位，例如文章、卡片、貼文或新聞內容， 適合被單獨分享或引用。 |
| <aside> | 補充或相關資訊區塊，常用於側欄、延伸閱讀、推薦內容。 |
| <footer> | 頁尾資訊區域，通常包含版權宣告、聯絡方式、社群連結等。 |
這些語意化標籤能幫助搜尋引擎更理解內容結構，也讓程式碼更好維護。
五、表單相關標籤
| 標籤 | 功能說明 |
|---|---|
| <form> | 表單的外層容器，用來包住所有表單欄位， 並設定送出方式（如 action、method）。 |
| <input> | 各式輸入欄位，可依 type 屬性設定不同形式， 如 text、email、number、 checkbox、radio 等。 |
| <button> | 按鈕元素，常用於送出、確認或觸發操作， 可搭配 type="submit"、button 使用。 |
| <textarea> | 多行文字輸入框，適合留言、備註、意見回饋等較長文字內容。 |
| <select><option> | 下拉式選單，用於提供固定選項給使用者選擇， 常見於地區、類型、數量等欄位。 |
- 聯絡我們
- 訂閱電子報
- 登入 / 註冊
小總結
只要能熟悉以上這些 HTML 標籤，你就已經具備：- 撰寫基本網頁內容的能力
- 看懂大多數網站原始碼的基礎
- 為後續學習 CSS、SEO 與版型打好結構基礎
從零寫一個 HTML 頁面：完整範例＋每段拆解
以下是一個教學用的完整 HTML 頁面，並且逐段拆解。完整範例
<!DOCTYPE html><html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="description" content="這是我的第一個 HTML 頁面">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個網頁</title>
</head>
<body>
<header>
<h1>歡迎來到我的網站</h1>
</header>
<section>
<h2>這是一個介紹段落</h2>
<p>我是正在學習 HTML 的初學者，這是我建立的第一個網頁。</p>
<a href="https://www.google.com" target="_blank">前往 Google</a>
</section>
<footer>
<p>© 2025 我的網站</p>
</footer>
</body>
</html>
拆解說明
- <meta charset="UTF-8">：避免中文亂碼
- <meta name="description">：SEO 用
- <meta name="viewport">：手機版 RWD 必備
- <header>：頁首（語意化）
- <section>：主內容區塊
- <a target="_blank">：新分頁開啟
- <footer>：頁尾資訊
這是一個已經可以放上伺服器、可正式使用的基本 HTML 頁面。
如果你嘗試把這串丟入工具，你可以看到一個簡單的網頁。
但還缺少一些必要的元素、就是裝飾和動畫。
別擔心，我們會在之後的教學陸續告訴你，這些程式語法要怎麼學習，讓你的網站真正動起來。
我們再繼續往下學習 HTML 的其他要素。
把圖片正確放入網頁（含：路徑、格式、SEO、壓縮）
如果要在 HTML 中放入圖片，我們需要輸入：1. 最基本的圖片語法
<img src="images/banner.webp" alt="網站橫幅圖片">說明：
- src：圖片的路徑位置
- alt：圖片替代文字（SEO 與無障礙必填）
2. 圖片路徑常見錯誤
❌ C:\Users\my-pic.jpg（這只有你的本機能讀，放到網路上其他人是不能閱讀的）❌ 使用反斜線 \
✔ 使用 /（正確）
3. 相對路徑與絕對路徑
圖片路徑常見有三種寫法：<img src="images/photo.jpg"> <!-- 相對路徑 -->
<img src="/assets/photo.jpg"> <!-- 從網站根目錄開始 -->
<img src="https://domain.com/pic.jpg"> <!-- 絕對路徑 -->
簡單理解：
- 相對路徑：以目前 HTML 檔案所在位置為基準
- 根目錄路徑（/）：從網站最外層開始找
- 絕對路徑：完整網址，常用於 CDN 或外部圖片
4. 圖片格式怎麼選？
| 格式 | 適用 |
|---|---|
| WebP（強烈推薦） | 高品質、低容量，支援透明與動畫， 載入速度快，對 SEO 與網站效能非常友善。 |
| JPG | 適合照片類圖片，如人物、風景、實拍影像， 檔案較小但不支援透明背景。 |
| PNG | 適合透明背景、UI 圖示、Logo 或需要保留清晰邊緣的圖像， 檔案通常較大。 |
5. 圖片 SEO
圖片不只是裝飾，也會影響搜尋排名。(1)alt 一定要寫
<img src="coffee-shop.webp" alt="台北咖啡廳內用環境">(2) 避免使用亂碼或相機預設檔名
❌ IMG_001.jpg✔ about-us.webp、coffee-shop-interior.webp
(3) 檔名使用英文、小寫、短 dash（-）分隔
這些細節能幫助搜尋引擎理解圖片內容，也對圖片搜尋排名有幫助。6. 圖片壓縮工具
圖片一定要壓縮後再上傳，否則會嚴重影響網站速度。常見免費工具：
- TinyPNG
- Squoosh
- iLoveIMG
透過壓縮，圖片容量通常可以減少 50%～80%，
對首頁載入速度與使用者體驗改善非常明顯。
HTML 的語法細節：大小寫、閉合標籤、屬性、縮排與可讀性
大小寫
HTML 標籤大小寫不影響渲染但檔案路徑會區分大小寫（linux 伺服器）
→ 建議：全部用小寫來撰寫
標籤閉合
在 HTML 中，多數標籤都需要「開頭」和「結尾」，這樣瀏覽器才知道元素從哪裡開始、在哪裡結束。像這樣：<p>段落</p>
如果忘記寫結束標籤（也就是沒有閉合），瀏覽器可能會誤判結構、排版錯亂，甚至讓你後面整段程式碼都跑出 BUG，要花時間重新排查。
哪些標籤 不用 閉合？
有些標籤是「單標籤（void elements）」，本身就不需要結束標籤，直接寫上即可，例如：<br> <img> <meta> <input>
這些元素本身不包住內容，所以不需要成對出現。
屬性寫法
在 HTML 裡，「屬性（attribute）」用來替標籤提供更多資訊或功能。它放在標籤的起始標籤內，以「名稱＝值」的形式存在。例如：
<a href="https://example.com" target="_blank">連結</a>
這裡的 href 和 target 就是屬性：
href：告訴瀏覽器連結的目標網址
target：設定連結要如何開啟（例如 _blank 代表新分頁）
簡單說
標籤決定元素是什麼；屬性則決定它的行為或細部設定。
縮排（可讀性超重要）
寫 HTML 時，良好的縮排能大幅提升程式碼的可讀性。一般做法是：每往內一層，就縮排 4 個空格，讓層級結構變得一目了然。
範例：
<body>
<section>
<h2>標題</h2>
<p>段落內容</p>
</section>
</body>
- 內層縮排 4 空格 → 容易看出層級
- 同一層的標籤要對齊 → 結構乾淨、好維護
- 迅速找到錯誤
- 看懂結構不會迷路
- 與其他人協作時更輕鬆
HTML5 的多媒體與進階能力：現代網站不可或缺
HTML5 不僅能呈現文字與圖片，還支援許多現代化的網頁功能，使開發者能打造更豐富、多樣化的互動體驗：1. 音訊與影片播放（Audio / Video）
<video src="video.mp4" controls></video><audio src="music.mp3" controls></audio>
HTML5 原生支援影音播放，不再需要 Flash。這讓網站能更輕量、更安全，同時也提升跨裝置相容性。
2. iframe（嵌入外部內容）
<iframe src="https://maps.google.com"></iframe>可嵌入 Google Maps、YouTube、表單、其他網站內容，是常見的整合方式。
3. SVG（可縮放向量圖形）
放大不會失真，非常適合 Logo、Icon、資訊圖示。檔案體積小，可用 CSS/JS 控制，彈性高。
4. Canvas（畫布繪圖）
能使用 JavaScript 在畫布上即時繪製圖形。適合用於動畫、遊戲、資料視覺化（如圖表）。
總結：
HTML5 讓網頁不只是「內容展示」，更成為能承載互動、動畫、資料呈現的完整平台。
HTML 與 SEO 的關係：結構寫得好，排名會更好
許多人以為 SEO 是關鍵字與外部連結，但其實 Google 理解網頁的第一步，就是讀 HTML。也因此，正確、語意化的 HTML 會直接提升搜尋排名。
以下是 HTML 影響 SEO 的五大關鍵：
1. <title> 與 <meta> 直接決定搜尋結果顯示內容
<title>＝搜索結果藍色標題<meta name="description">＝搜尋結果摘要
這兩者會影響點擊率（CTR）與排名。
2. <h1> 告訴 Google「這頁在講什麼」
清楚的標題階層（H1 → H2 → H3…）有助 Google 理解內容架構。3. 圖片 alt 屬性是 Google 理解圖片的唯一方式
沒有 alt = Google 不知道圖片在說什麼影響圖片搜尋曝光與整頁 SEO 分數
4. 語意化 HTML 提升搜尋引擎理解能力
使用 <article>、<section>、<nav> 等語意標籤，能讓 Google 知道哪裡是主內容、哪裡是導覽、哪裡是附加資訊。5. HTML 結構錯誤會拖慢速度 → 影響 SEO
像是：- 未壓縮圖片
- 多餘標籤
- 深層嵌套結構
- 錯誤語法
初學者學習 HTML 好用工具推薦
✔ 編輯器
VS Code（強烈推薦）Sublime Text
Notepad++
✔ 即時預覽
W3schoolsCodePen
JSFiddle
✔ HTML 排錯工具
W3C Validator✔ 圖片壓縮 / 格式轉換
TinyPNGSquoosh
常見初學者 FAQ
Q1. 為什麼圖片在我電腦看得到，上傳到網站後就消失？
通常是因為你使用了「本機路徑」或「大小寫不一致」。❌ C:\Users\Desktop\pic.png（只有你電腦看得到）
✔️ images/pic.png 或 ./img/photo.png（相對路徑）
另外，伺服器是區分大小寫的，Photo.png 與 photo.png 是不同檔案。
Q2. 為什麼中文變亂碼？
因為缺少編碼設定。請在 <head> 裡加入：<meta charset="UTF-8">
這樣瀏覽器才知道用 UTF-8 正確解讀中文。
Q3. 為什麼我明明改了 HTML，網頁卻沒有更新？
很可能是瀏覽器快取住舊版本。→ 按下 Ctrl＋F5（Mac 可用 Command＋Shift＋R）強制重新載入。
Q4. 為什麼我的手機版版面會「整個跑掉」？
因為缺少 RWD 必備的 viewport 設定：<meta name="viewport" content="width=device-width, initial-scale=1.0">
沒有這行，手機會用桌機的畫面比例去縮放，版面自然會亂掉。
Q5. 為什麼超連結點了沒反應？
通常是因為網址缺少 http:// 或 https://。❌ href="www.google.com"
✔️ href="https://www.google.com"
瀏覽器需要完整網址才能正確前往頁面。
如果你已經掌握 HTML，接下來的學習路線通常是：
Step 1：CSS讓網站變得「漂亮、有設計感」。
Step 2：JavaScript
讓網站有「互動功能」。
Step 3：RWD（手機版優化）
使用 flexbox、grid 進行版面設計。
Step 4：前端框架（進階）
React、Vue、Svelte。
別擔心，我們會一步步帶領你前進。
地址：台中市西屯區大墩二十街63號2F-1 
電話：04-23109296 
info@ileo.com.tw