HTML 入門教學：新手必學的基礎語法與架構全攻略

第一章：HTML 是什麼？網頁設計的骨骼

在開始寫程式碼之前,我們必須先理解 HTML 在網頁世界中的角色。如果不理解它的本質,就像蓋房子不懂打地基一樣,蓋出來的網站既脆弱又無法被搜尋引擎喜愛。

1. 什麼是 HTML？

HTML 的全名是 HyperText Markup Language（超文本標記語言）。請注意,它不是一般的程式語言（Programming Language）,而是一種標記語言。它不像 Python 或 Java 需要處理複雜的邏輯運算,HTML 的工作非常單純且專注：告訴瀏覽器,網頁上的內容是什麼。

2. 網頁開發鐵三角：HTML、CSS 與 JavaScript

要讓一個現代網站運作,通常需要三種技術分工合作。我們可以用「蓋房子」或「人體」來比喻：

技術	比喻	負責工作
HTML（骨骼與結構）	房子的樑柱、人體的骨架	決定了房子有幾根柱子、幾面牆。沒有 HTML,網頁就是一片空白。
CSS（皮膚與裝潢）	牆壁顏色、傢俱擺設	決定牆壁的顏色、字體的大小、版面的排列。沒有 CSS,網頁會醜得像一份純文字文件。
JavaScript（肌肉與大腦）	人體的動作與思考	負責互動與功能。例如點擊按鈕會彈出視窗、送出表單。

3. 為什麼 SEO 重視 HTML？

⚠️ SEO 工程師的提醒：Google 爬蟲（Bot）看網頁的方式,就是閱讀 HTML 程式碼。如果你的 HTML 結構混亂、標籤亂用（例如把內文標示為標題）,Google 就會「看不懂」你的網站重點,導致排名低落。因此,寫出標準、乾淨的 HTML,就是 SEO 的第一步。

第二章：建立你的第一個 HTML 檔案：標準文件結構

現在,讓我們動手實作。一個標準的 HTML 檔案並不是隨便寫寫就好,它有一個固定的「樣板結構」（Boilerplate）,就像公文有固定的格式一樣。

1. 準備工具

你不需要昂貴的軟體,微軟內建的記事本也可以寫 HTML,但我強烈建議使用 VS Code (Visual Studio Code) 這類專業編輯器,它有強大的輔助輸入功能。

2. HTML 的標準骨架

請將以下程式碼複製到你的編輯器中,並存檔為 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>我的第一個網頁</title>
</head>
<body>
    <h1>哈囉！你好,HTML！</h1>
    <p>這是我建立的第一個網頁內容。</p>
</body>
</html>

3. 程式碼逐行解析

這段程式碼分為幾個關鍵部分,缺一不可：

<!DOCTYPE html> 這不是標籤,而是「聲明」。它大聲告訴瀏覽器：「嗨！我使用的是最新的 HTML5 標準。」
<html lang="zh-Hant-TW"> 這是根元素,包住所有內容。lang 屬性非常重要,它告訴瀏覽器與 Google 這是「繁體中文（台灣）」的網頁,有助於在地化 SEO。
<head> (頭部) 這裡放的是給瀏覽器和搜尋引擎看的資訊。使用者在畫面上看不到這裡的內容。包含網頁標題 (title)、編碼設定 (charset) 等。
<body> (身體) 這裡放的是給使用者看的內容。你在瀏覽器視窗中看到的所有圖片、文字、影片,全部都要寫在 body 裡面。

第三章：掌握文字排版：標題、段落與強調

文字是網頁資訊傳遞的核心。在 HTML 中,你不應該只為了「讓字變大」而使用標題標籤,每一種標籤都有它的「語意」（Semantic）。

1. 標題標籤 (Heading Tags)：H1 至 H6

HTML 提供六個等級的標題,從 <h1> (最大/最重要) 到 <h6> (最小/最不重要)。

SEO 關鍵心法：

H1 是王牌： 一個頁面只能有一個 H1,通常用在文章的主標題或網頁 LOGO。Google 會將 H1 視為該頁面最核心的主題。
階層要分明： 不要跳著用。正確順序應該是 H1 → H2 → H3,不要因為覺得 H3 字體大小比較剛好,就跳過 H2 直接用 H3。

2. 段落 (Paragraph) 與換行

<p> 用來定義一個段落。瀏覽器會在段落上下自動留出一些空白間距,讓閱讀更舒適。

<br> 這是「強制換行」標籤：

錯誤用法： 使用多個 <br> 來製造段落間的距離（請改用 CSS 設定 margin）。
正確用法： 在詩詞或地址這種需要緊密換行的地方使用。

3. 重要的強調標籤：Strong vs B

這兩個標籤在視覺上都會讓字體變粗,但在 SEO 眼中意義完全不同：

標籤	語法	視覺效果	SEO 與語意意義
Strong	`<strong>重點</strong>`	粗體	強烈語氣強調。告訴 Google 這裡的文字「非常重要」,權重較高。
Bold	`<b>文字</b>`	粗體	純粹視覺上的粗體,沒有語氣上的強調意義。

專家建議： 在撰寫教學文章或強調關鍵字時,請優先使用 <strong>,這有助於搜尋引擎抓取文章重點。

第四章：豐富你的網頁：圖片與超連結

純文字的網頁太枯燥了。要讓使用者願意停留,你需要圖片來吸引目光,需要連結來引導動線。對 SEO 來說,這兩者也是搜尋引擎判斷網頁內容豐富度與關聯性的重要指標。

1. 圖片標籤 <img>：讓網頁圖文並茂

圖片標籤是一個「單標籤」（Self-closing tag）,它不需要結束標籤（如 </img>）,因為它不包含文字內容。

<img src="images/cat.jpg" alt="一隻正在睡覺的橘貓" width="500">

src (Source)： 這是圖片的路徑。
- 絕對路徑： 完整的網址,如 https://www.example.com/pic.jpg。
- 相對路徑： 圖片相對於 HTML 檔案的位置,如 images/pic.jpg（推薦用於網站內部圖片）。
width / height： 設定圖片寬高。建議設定其中一個數值即可,另一個設為 auto 或不寫,以免圖片比例變形。

⚠️ SEO 資深工程師的叮嚀：Alt 屬性是關鍵

alt (Alternative Text,替代文字) 是很多新手會忽略,但 SEO 專家最重視的屬性。

無障礙瀏覽： 當視障人士使用螢幕閱讀器時,機器會唸出 alt 的內容,告訴使用者這張圖是什麼。
圖片 SEO： Google 爬蟲看不懂圖片畫面,它讀的是 alt。如果你想讓圖片出現在 Google 圖片搜尋中,alt 必須精準描述圖片內容（例如寫「紅色法拉利跑車」優於「車子」或「IMG_001」）。
圖片失效備案： 當網路太慢圖片跑不出來時,網頁會顯示這段文字。

2. 超連結 <a>：網路世界的橋樑

WWW (World Wide Web) 的核心就是連結。

<a href="https://google.com" target="_blank">前往 Google</a>

href (Hypertext Reference)： 指定連結要去的地方。
target="_blank"： 這是一個常用的屬性,意思是在新分頁開啟連結,保留原本的頁面不被覆蓋。

錨點連結 (Anchor Link)

你有看過點擊「目錄」,網頁就自動滑動到該章節的功能嗎？這就是錨點。

先給目標設定 ID：<h2 id="section1">第一章</h2>
連結設定為 ID 名稱：<a href="#section1">跳到第一章</a>

第五章：容器的概念：區塊元素與行內元素

這是初學者最容易卡關,卻也是CSS 排版基礎中最重要的觀念。HTML 標籤天生分為兩大類,它們在網頁上的「佔地盤」方式完全不同。

1. 區塊元素 (Block Elements)

特性： 霸道。無論內容多少,它預設都會佔滿整整一行（左右撐滿）,並且會自動換行。
常見標籤： <h1> - <h6>, <p>, <div>, <ul>, <li>。
用途： 通常用來作為網頁的「骨架」或「容器」,用來劃分版面區域。

2. 行內元素 (Inline Elements)

特性： 隨和。內容有多少,它就佔多少空間。它不會自動換行,會跟其他文字並排在一起。
常見標籤： <a>, <span>, <img>, <strong>。
用途： 通常用來修飾文字或作為段落中的小元件。

3. 無語意容器雙雄：Div 與 Span

有兩個標籤本身沒有任何特殊意義（不像 <p> 代表段落）,它們純粹是為了「包裝內容」以便用 CSS 進行排版或設定樣式。

標籤	類型	用途
`<div>`	Block (區塊)	網頁排版的主力。例如包住頁首、側邊欄、文章區塊。
`<span>`	Inline (行內)	文字樣式微調。例如想把段落中的某兩個字變成紅色,就會用 `<span>` 包起來設定 CSS。

❌ 常見錯誤： 請不要將區塊元素（如 <div>）放進與行內元素（如 <p>）裡面。雖然瀏覽器可能勉強顯示,但這不符合標準。

錯誤： <p>這是一段文字<div>插進來的區塊</div></p>
正確： <div><p>文字段落</p><div>另一個區塊</div></div>

第六章：資料呈現與互動：列表、表格與表單

網頁不只是展示文章,還需要整理數據（表格）和收集使用者資訊（表單）。

1. 列表系統 (Lists)

幾乎所有的網站導覽列（Menu）,骨子裡都是「無序列表」。

無序列表 <ul> (Unordered List)： 預設前方會有小黑點。

<ul>
    <li>首頁</li>
    <li>關於我們</li>
    <li>產品介紹</li>
</ul>

有序列表 <ol> (Ordered List)： 預設前方會有 1, 2, 3 的數字排序,適合用於步驟教學。

2. 表格結構 <table>

在早期的網頁設計中,人們會用表格來排版（這是錯誤的歷史！）,現在表格只應該用來呈現數據。

<table> 表格容器。
<tr> (Table Row) 橫的一列。
<th> (Table Header) 標題儲存格（文字會自動加粗置中）。
<td> (Table Data) 一般的資料儲存格。

3. 表單基礎 <form>

這是網頁與使用者互動的介面,例如登入、註冊、搜尋框。

<form action="/submit-data" method="POST">
    <label for="username">姓名：</label>
    <input type="text" id="username" name="user_name" placeholder="請輸入姓名">
    
    <br>
    
    <label for="email">信箱：</label>
    <input type="email" id="email" name="user_email">
    
    <button type="submit">送出資料</button>
</form>

<input> 最多變的標籤。透過 type 屬性可以變成文字框 (text)、密碼框 (password)、單選圓鈕 (radio) 或核取方塊 (checkbox)。
<label> 透過 for 屬性綁定輸入框的 id,增加可用性（點擊文字也能聚焦到輸入框,對手機使用者很友善）。

第七章：進階必學：HTML5 語意化標籤 (Semantic Elements)

如果你打開十年前的網站原始碼,你會看到滿滿的 <div>。但在 HTML5 時代,寫出「機器讀得懂」的語意化標籤,是 SEO 的決勝關鍵。

1. 什麼是「語意化」？

簡單來說,就是用對的標籤做對的事。

沒有語意： <div> 和 <span>。它們只告訴瀏覽器「這裡是一個區塊」,但沒說這個區塊是做什麼的。
有語意： <header>, <footer>, <article>。它們清楚定義了內容的目的。

為什麼這對 SEO 很重要？

Google 的爬蟲是機器人。當它看到 <nav>,它立刻知道「這是導覽列,很重要」；看到 <footer>,它知道「這是版權宣告,權重較低」。語意化標籤能幫助搜尋引擎更精準地索引你的網頁內容。

2. 核心語意標籤詳解

請試著用這些標籤取代你原本的 <div>：

<header> (頁首) 通常包含網站 LOGO、搜尋框或導覽列。
<nav> (導覽列) 放置主要的連結選單。Google 會極度重視這裡的連結。
<main> (主要內容) 每個頁面只能有一個 <main>。這是網頁的核心區域,不包含側邊欄或頁首頁尾。
<article> (文章) 獨立、完整的內容區塊。例如一篇部落格文章、一則新聞報導。判斷標準：如果把這塊內容單獨拿出來放在別的地方看,語意依然完整嗎？如果是,就用 <article>。
<section> (區塊) 具有特定主題的內容群組。通常包含一個標題 (h2-h6)。
<aside> (側邊欄) 與主要內容由間接關係的區塊。例如：相關文章推薦、廣告、作者簡介。
<footer> (頁尾) 版權宣告、聯絡資訊、Sitemap 連結。

3. 架構對比範例

❌ 舊式寫法 (Div Soup)：

<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>

✅ SEO 友善寫法：

<header>...</header>
<main>
    <article>
        <h1>文章標題</h1>
        <p>文章內容...</p>
    </article>
</main>
<footer>...</footer>

第八章：SEO 資深工程師的 HTML 優化檢核表

在網站上線前,身為工程師我會拿出這張 Check List 進行最後確認。這不僅是為了程式碼整潔,更是為了讓 Google 愛上你的網站。

1. TDK 三劍客設定

雖然現在 Keywords 的權重已降低,但 Title 和 Description 依然是 SEO 的靈魂。

<title> 確保每個頁面都有獨一無二的標題,並且包含關鍵字。
Description (<meta name="description" ...>) 這是搜尋結果頁 (SERP) 下方的小字,直接影響使用者的點擊率 (CTR)。

2. Open Graph (OG) 社群標籤

你有沒有發現,有些網址貼到 Line 或 Facebook 會變成漂亮的圖文卡片,有些卻只是一串醜醜的網址？差別就在這裡。

<meta property="og:title" content="文章標題">
<meta property="og:description" content="文章簡介">
<meta property="og:image" content="https://example.com/cover.jpg">

這能大幅增加你的網頁在社群媒體上的曝光效果。

3. 程式碼整潔度 (Code Hygiene)

縮排 (Indentation)： 保持一致的縮排（通常是 2 或 4 個空白鍵）,讓結構一目了然。
註解 (Comments)： 在複雜區塊加上 ,方便日後維護。
避免過度巢狀 (Nested Hell)： 不要寫出 <div class="a"><div class="b"><div class="c">...</div></div></div> 這種深不見底的結構,會拖慢讀取速度。

第九章：HTML 常見問題 Q&A

整理了新手學習過程中最常遇到的疑惑,幫你避開坑洞。

Q1：HTML、CSS、JavaScript 一定要全部學完才能做網頁嗎？

A：不用。你可以先用 HTML 寫出純文字網頁,接著學 CSS 美化它。JavaScript 可以等到需要複雜互動（如輪播圖、購物車）時再學。循序漸進比較不會有挫折感。

Q2：我寫的 HTML 在手機上跑版了,字變超小怎麼辦？

A：檢查你的 <head> 裡是否有這行程式碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這行指令告訴手機瀏覽器：「請依照螢幕寬度自動縮放」,是 RWD 響應式網頁的第一步。

Q3：為什麼我的圖片顯示「破圖」？

A： 90% 是路徑錯誤。

確認圖片檔名是否正確（注意大小寫,Image.jpg 和 image.jpg 是不同的）。
確認副檔名是否正確（是 .jpg 還是 .png）。
如果是相對路徑,確認圖片資料夾層級是否正確。

Q4：現在有 AI 和網頁製作軟體,還需要手寫 HTML 嗎？

A：工具能幫你快速產出,但如果你不懂原理,當版面跑掉、SEO 排名上不去,或者需要客製化修改時,你會束手無策。懂 HTML 讓你有能力去「除錯」和「優化」AI 產出的代碼。

Q5：HTML 標籤有分大小寫嗎？

A：雖然 HTML 不區分大小寫（<DIV> 和 <div> 是一樣的）,但根據 W3C 標準與業界規範,強烈建議一律使用小寫。這讓程式碼更乾淨、易讀,也符合未來 XHTML 的相容性要求。

網頁已經進入新時代，好網站不再需要花大錢！

有網頁設計需求請與我們聯絡，NEWSCAN設計提供多種方案供您選擇。