首頁/網路小學堂

2025.12.24

/ 活動期間：[2025.12.24 ~ ]

2026 HTML5網站設計教學｜HTML 5 常用標籤與語法：從排版到超連結一次上手

一、先搞懂：什麼是 HTML5 網站設計？
二、HTML5 網頁骨架：從開始
三、排版基本功：標題、段落與文字強調
四、清單與表格：讓資訊更有條理
五、超連結與導覽列：HTML5 網站設計的靈魂
六、圖片與語意標籤：讓版面更有「結構感」
七、實戰範例：組出一個簡單的 HTML5 網頁版型
八、新手常犯 HTML5 網站設計錯誤
常見 FAQ：HTML5 網站設計新手最常問的問題
九、從常用標籤開始，穩扎穩打學 HTML5 網站設計

想踏入前端開發，或是自己做一個品牌官網、作品集網站嗎？
不管你是要交給網頁設計公司、還是打算自己動手，「HTML5 網站設計」都是必須聽得懂、看得懂的一門基礎語言。
我們已經在上一篇文章中，說明 HTML5 相關的基礎知識點。

延伸閱讀：HTML 基礎知識

這篇文章會用實作導向的方式，帶你從 HTML5 文件骨架、排版標籤、清單與表格，到超連結與導覽列一次搞懂，並穿插一些 SEO 與實務小技巧。
看完之後，你至少可以：

看懂一個基本的 HTML5 網頁結構
知道常用標籤是幹嘛用的（h1、p、a、img、nav…）
簡單調整文案、連結、版塊結構，不再對「原始碼」感到恐懼

一、先搞懂：什麼是 HTML5 網站設計？

HTML（HyperText Markup Language）是用來「標記網頁內容」的語言，決定畫面上有哪些東西：
標題、段落、圖片、超連結、表格、表單……都由 HTML 負責。
而 HTML5 是目前主流的版本，和舊版 HTML 相比，有幾個特色：

新增許多語意標籤（<header>、<nav>、<main>、<article>…）
原生支援影片、音訊、Canvas 等互動功能
表單欄位更強大（日期、email、顏色、range…）
搭配 CSS、JavaScript，可以做出 RWD 響應式與更多互動效果

當你搜尋「HTML5網站設計」時，多半就是在找這一整套：
用 HTML5 作為骨架，再加上 CSS 美化版面、JavaScript 增加互動。

二、HTML5 網頁骨架：從 <DOCTYPE html> 開始

每一個合格的 HTML5 網頁，大致都長得像這樣：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>我的第一個 HTML5 網站</title>
  <meta name="description" content="這是一個使用 HTML5 建立的示範網頁。">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Hello, HTML5 網站設計！</h1>
  <p>這是我的第一段文字內容。</p>
</body>
</html>

必懂元素說明

<!DOCTYPE html>

告訴瀏覽器「這是一份 HTML5 文件」，請用標準模式解析。

<html lang="zh-Hant">

整份網頁的根元素，lang 告訴搜尋引擎與輔助工具：這是繁體中文。

<head>...</head>

放的是「給瀏覽器和搜尋引擎看的資訊」，例如：編碼、標題、SEO 描述、CSS、JS 引入等。

<meta charset="UTF-8">

設定編碼為 UTF-8，避免亂碼，是 HTML5 網站設計中一定要加的。

<meta name="viewport" ...>

讓畫面在手機上也有正常比例，是 RWD 響應式設計的基礎。

<title>...</title>

顯示在瀏覽器分頁上的標題，也是 SEO 很重要的一塊。

<body>...</body>

網站實際呈現給訪客的內容，都在這裡：標題、段落、圖片、超連結、表單等。

三、排版基本功：標題、段落與文字強調

HTML5 網站設計的第一步，就是讓內容「有層次」地呈現出來。
因為底下內容有些會涉及到樣式的說明，所以我們這邊統一說明：其實樣式不是CSS的專屬，HTML同樣可以用來控制該段標籤的樣式。
不過，若要全站控制，方便日後維護管理，除非特別例外，我們通常會建議用CSS控制全站所有的樣式，讓HTML恢復「標籤」的功能。

3-1 標題與段落：<h1>～<h6>、<p>

HTML 提供六個層級的標題標籤，從最重要的 <h1> 到最小的 <h6>。
它們就像文章的大標、小標、次標，讓內容自然被分成不同的段落與層級。

<h1>網站主標題（通常一頁只會有一個）</h1>
<h2>章節標題</h2>
<h3>小節標題</h3>
<p>這是一個段落，用來表示一整段完整的敘述內容。</p>

各標籤的用途說明

<h1>：網頁最重要的標題
→ 通常代表整頁主題，只建議使用一次。

<h2>～<h6>：往下的副標題
→ 像文章中的大綱，讓讀者快速掃描出內容架構。

<p>：段落文字
→ 用來呈現正常的文章內容。

為什麼標題層級很重要？（超初學者也要知道的 SEO 觀念）

搜尋引擎會透過 <h1>、<h2> 的內容來判斷：

這頁主要在講什麼
哪些內容是重點
主題的結構是否清晰

建議每頁放一個 <h1>，並自然地包含你的主要關鍵字。

3-2 換行與分隔線：<br>、<hr>

有時候你只想換一行，而不是開新的段落。
或是需要畫一條線把區塊分開，這時就會用到這兩個標籤：

<p>地址：台北市某某路 100 號<br>7 樓之 1</p>
<hr>
<p>以上為公告內容，如有問題請聯繫客服。</p>

差異解說

<br>：單純換行
→ 不會形成新的段落，只是跳下一行。

<hr>：水平分隔線
→ 把不同內容區塊用水平線將視覺上分開，常用於文章段落切換。

3-3 文字強調：<strong>、<em>、<mark>

在文章中，有些字詞確實需要更醒目，例如重要資訊或注意事項。
HTML 提供語意化（semantic）的強調方式，讓瀏覽器、讀者與搜尋引擎都能理解哪些文字比較重要。

<p>本方案 <strong>限時優惠</strong>，請在期限內完成申請。</p>
<p>請特別 <em>留意</em> 付款期限。</p>
<p>這句話裡的 <mark>關鍵重點</mark> 需要被注意。</p>

各標籤的功能

<strong>：重要內容
→ 預設加粗，代表語意上的「強調」。

<em>：需要被著重念出的語氣
→ 預設斜體，像口語中的「特別是…」。

<mark>：以螢光筆標記的效果
→ 用來凸顯關鍵字或需要注意的重點。

3-4 引用與程式碼：<blockquote>、<q>、<code>、<pre>

HTML 也提供呈現引用語句、程式碼與原始格式文字的方式。

<blockquote>
  內容為王，但結構決定內容能被看見的機會。
</blockquote>
<p>如同 <q>簡單就是力量</q> 這句話所說。</p>
<pre><code>&lt;h1&gt;這是標題&lt;/h1&gt;</code></pre>

用途解析

<blockquote>：段落引用（長句）
→ 自動縮排，用於引用文章或語錄。

<q>：短句引用
→ 自動加上引號，常見於內文的小引用。

<code>：程式碼字體
→ 顯示等寬字體，突出程式內容。

<pre>：保留原格式（空格、換行）
→ 常與 <code> 搭配，用來展示完整原始碼。
初學者常會把注意力放在「網站要怎麼變漂亮？」，但其實：
先把 HTML 結構寫清楚，CSS 才能好好幫你變漂亮。
標題、段落、強調、引用，這些基礎排版能力就是網站閱讀體驗的根基。
只要掌握上述幾個元素，你的網頁就能：

更好讀
結構更清楚
對 Google 更友善
更容易維護與調整

四、清單與表格：讓資訊更有條理

在 HTML5 中，清單與表格是用來整理資訊的超實用工具。
清單可以幫助你呈現步驟、要點、選單；表格則適合比較數據、列出欄位內容。
只要善用這兩種元素，你的網頁結構馬上變得清楚又專業！

✔ 有序清單 <ol>（Ordered List）— 有順序、會自動編號

<h2>學習 HTML5 網站設計的三個步驟</h2>
<ol>
  <li>先理解 HTML5 文件結構</li>
  <li>熟悉常用標籤與排版方式</li>
  <li>再搭配 CSS 完成版面設計</li>
</ol>

適合用在：

指南、操作步驟
教學內容
需要「順序重要性」的地方

✔ 無序清單 <ul>（Unordered List）— 無順序、預設是圓點

<h2>常見技術組合</h2>
<ul>
  <li>HTML5 + CSS3 + JavaScript</li>
  <li>RWD 響應式網頁</li>
  <li>前後端分離架構</li>
</ul>

適合用在：

特色列表
選單
群組化資訊

✔ 清單項目 <li>

不管是 <ul> 或 <ol>，每一項內容都要放在 <li> 裡。
它的角色就像「一條一條的項目」。
這樣就會是數字列點。

4-2 定義清單：<dl>、<dt>、<dd>

定義清單適合呈現「名詞 → 說明」的結構。
和一般清單不同，它不是用點或數字，而是用成對資訊來呈現內容。

<dl>
  <dt>HTML</dt>
  <dd>用來定義網頁結構的標記語言。</dd>
  <dt>CSS</dt>
  <dd>用來控制網頁外觀樣式的語言。</dd>
</dl>

用途非常廣，包括：

名詞解釋
FAQ 問答
表單欄位說明
技術文件內容

其中：

<dt>（definition term）＝名詞
<dd>（definition description）＝名詞的解釋

寫起來語意非常清楚，也很適合讓搜尋引擎理解。

4-3 表格：<table>、<tr>、<th>、<td>

當你要呈現比較類資訊，例如價格、規格、時程，就會用到表格。

<table>
  <thead>
    <tr>
      <th>方案名稱</th>
      <th>月費</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>基本型</td>
      <td>$599</td>
    </tr>
    <tr>
      <td>進階型</td>
      <td>$1,299</td>
    </tr>
  </tbody>
</table>

表格元素介紹：

<table>：整個表格的容器
<tr>：一列（row）
<th>：表頭欄位（預設粗體＋置中）
<td>：一般資料欄位

HTML5 表格本身只負責「結構」，外觀（邊框、間距、顏色）通常會交給 CSS 處理。

實務建議

雖然表格很好用，但請不要用表格來做整個頁面的排版。
在大約網路剛成形的時候，會有很多網頁工程師用表格來寫網頁。
但這會造成以下問題：

程式碼難維護
排版很不彈性
手機版容易壞掉
搜尋引擎更難理解內容

現代 HTML5 都是用 CSS（Flexbox、Grid）來做版面配置，
表格只用來呈現「表格型資料」。

五、超連結與導覽列：HTML5 網站設計的靈魂

超連結幾乎可以說是 HTML 的靈魂，沒有 <a>，網頁就只是靜態文件而已。

5-1 基本超連結：<a href="...">

<a href="about.html">關於我們</a>
<a href="https://example.com">前往官方網站</a>

href 可以是相對路徑（站內頁面）或絕對網址（外部網站）

5-2 新分頁開啟與安全性：target、rel

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  在新分頁開啟
</a>

target="_blank"：在新分頁開啟
rel="noopener noreferrer"：避免新開的頁面取得原頁控制權，提升安全性

5-3 電子郵件與電話連結

<a href="mailto:service@example.com">寫信給客服</a>
<a href="tel:0800123456">撥打客服專線</a>

非常適合用在聯絡頁或行動版網頁上。

5-4 頁面內錨點（跳到指定位置）

<!-- 錨點目標 -->
<h2 id="faq">常見問題</h2>
<!-- 其他地方的連結 -->
<a href="#faq">直接跳到常見問題區</a>

也可以用來做「回到頂部」：

<body id="top">
  ...
  <a href="#top">回到頁面頂部</a>
</body>

5-5 導覽列與 <nav>

<nav>
  <ul>
    <li><a href="index.html">首頁</a></li>
    <li><a href="services.html">服務項目</a></li>
    <li><a href="cases.html">案例作品</a></li>
    <li><a href="contact.html">聯絡我們</a></li>
  </ul>
</nav>

<nav>：表示「這一區是網站的導覽區域」
裡面通常放 <ul> + <li> + <a>

SEO 小提醒：
導覽列的錨文字（anchor text）盡量具體，例如「網站設計服務」、「SEO 優化介紹」，比「更多」、「點這裡」更有意義。

六、圖片與語意標籤：讓版面更有「結構感」

6-1 插入圖片：<img> + alt

<img src="images/html5-banner.webp"
     alt="HTML5 網站設計教學示意圖">

src：圖片路徑
alt：替代文字（圖片載不到時顯示、螢幕閱讀器用、也有助 SEO）

6-2 語意更完整：<figure> 與 <figcaption>

<figure>
  <img src="images/layout-sample.webp" alt="HTML5 網站基本版型示意圖">
  <figcaption>圖 1：HTML5 網站設計常見頁面區塊。</figcaption>
</figure>

這種寫法，對圖片＋說明的組合比較語意化，也利於搜尋引擎與可及性工具理解。

6-3 頁面結構語意標籤：header、main、section、article、aside、footer

<header>
  <h1>某某品牌官方網站</h1>
  <nav>...導覽列...</nav>
</header>
<main>
  <section>
    <h2>最新消息</h2>
    <!-- 多則文章或卡片 -->
  </section>
  <section>
    <h2>服務介紹</h2>
    <!-- 服務內容 -->
  </section>
</main>
<aside>
  <h3>熱門文章</h3>
  <!-- 側欄連結 -->
</aside>
<footer>
  <p>© 2025 某某公司．保留所有權利</p>
</footer>

這些語意標籤不會直接改變外觀，但：

讓程式碼更好讀、結構更清晰
有助搜尋引擎理解哪裡是主內容、哪裡是側欄、哪裡是導覽
對無障礙（螢幕閱讀器）也更友善

七、實戰範例：組出一個簡單的 HTML5 網頁版型

以下是一個結合「排版＋圖片＋超連結＋導覽列」的簡化版本。你可以直接存成 index.html 試跑。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>HTML5 網站設計教學示範</title>
  <meta name="description" content="帶你一步步認識 HTML5 網站設計的基本標籤與語法，從排版到超連結一次上手。">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="top">
  <header>
    <h1>HTML5 網站設計入門教學</h1>
    <nav>
      <ul>
        <li><a href="#intro">認識 HTML5</a></li>
        <li><a href="#layout">排版與結構</a></li>
        <li><a href="#links">超連結示範</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="intro">
      <h2>認識 HTML5</h2>
      <p>HTML5 是現代網站設計的基礎，搭配 CSS 與 JavaScript，可以打造具有互動與響應式版面的網頁。</p>
    </section>
    <section id="layout">
      <h2>基本排版與圖片</h2>
      <p>以下是常見的標題、段落與圖片示範：</p>
      <h3>標題示範</h3>
      <p>這是一段普通說明文字，其中包含 <strong>重要重點</strong> 與 <em>需要注意的地方</em>。</p>
      <figure>
        <img src="images/demo-layout.webp" alt="簡單 HTML5 版面示意">
        <figcaption>圖 1：標題、文字與圖片的基本組合。</figcaption>
      </figure>
    </section>
    <section id="links">
      <h2>超連結與導覽</h2>
      <p>你可以前往 <a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML" target="_blank" rel="noopener noreferrer">MDN HTML 文件</a> 查詢更多標籤用法。</p>
      <p><a href="#top">回到頁面頂部</a></p>
    </section>
  </main>
  <footer>
    <p>© 2025 HTML5 網站設計教學示範頁</p>
  </footer>
</body>
</html>

你可以在這個基礎上慢慢加上：

CSS：控制字體、顏色、排版、RWD
JavaScript：按鈕互動、捲動效果、表單驗證

八、新手常犯 HTML5 網站設計錯誤

最後整理幾個實務上常見的問題與建議：

忘記寫 <!DOCTYPE html>

容易讓瀏覽器進入怪異模式，導致排版行為不一致。

所有文字都用 <div>，完全不用標題標籤

這會讓 SEO 與結構超級混亂，記得善用 <h1>～<h3> 來標示層級。

圖片沒有 alt

不利於無障礙與圖片搜尋，至少提供一句簡短描述。

大量用 <br> 來排版

段落就用 <p>，區塊用 <section>、<article>，外觀交給 CSS。

導覽列不使用 <nav>，所有區塊都用 <div> 包起來

HTML5 已經提供語意標籤，善用它們能讓網站更「有結構感」。

標題階層亂跳（直接從 <h1> 跳到 <h4>）

儘量順著層級往下，讓搜尋引擎與使用者都看得懂文章架構。

常見 FAQ：HTML5 網站設計新手最常問的問題

Q1：我是完全新手，要學 HTML5 網站設計，一定要會寫程式嗎？

A：不用。HTML 是「標記語言」，不是傳統那種要寫邏輯、判斷式的程式語言。
本篇教的是如何用標籤標記標題、段落、圖片、超連結等內容，只要照著範例打幾次，很快就能看懂基本結構。

Q2：HTML 跟 HTML5 有什麼差別？一般做公司官網需要在意嗎？

A：HTML5 是現代版本的 HTML，多了很多「語意標籤」（如 <header>、<nav>、<main>、<article>）、原生影音、Canvas、表單新型態等等。
做一般官網時，使用 HTML5 語法 + 語意標籤可以讓程式碼更清楚、對 SEO 和無障礙（螢幕閱讀器）也更友善，所以是現在建議的標準做法。

Q3：為什麼我的中文內容變亂碼？

A：最常見原因是缺少編碼設定。請確認在 <head> 裡有這一行：

<meta charset="UTF-8">

這會告訴瀏覽器用 UTF-8 來解讀頁面文字，才能正常顯示中文。

Q4：為什麼電腦版排版正常，但手機版整個跑掉？

A：多半是缺少 viewport 設定。請在 <head> 裡加入：

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

這是 RWD（響應式網頁設計）的基礎，讓手機不會用「縮小桌機畫面」的方式顯示，而是依照裝置寬度重新排版。

Q5：一個頁面可以用很多個 <h1> 嗎？標題一定要照 h1 → h2 → h3 用嗎？

A：建議一個頁面只使用一個 <h1>，當作整頁的主題標題，其他章節用 <h2>、小節用 <h3> 以此類推。
這樣不只訪客閱讀起來有層次，搜尋引擎也能透過標題階層判斷「這一頁在講什麼」、「重點在哪裡」，對 SEO 有加分效果。

Q6：為什麼圖片在我電腦看得到，上傳到主機後就消失？

A：常見原因有兩種：
1. 使用本機路徑：
❌ C:\Users\Desktop\banner.png
✔️ images/banner.png 或 ./images/banner.png
上線後，伺服器只認得網站內的路徑。

2. 路徑大小寫不一致（伺服器區分大小寫）：
上傳的是 Banner.png，程式碼卻寫 banner.png 也會讓圖片顯示失敗。

另外，也別忘了幫圖片加上 alt，像這樣：

<img src="images/banner.webp" alt="HTML5 網站設計教學示意圖"

Q7：為什麼我的超連結點了沒反應，或是一直跳錯誤？

A：如果是外部網站，請確認 href 是否有加上 http:// 或 https://：
❌ <a href="www.google.com">Google</a>
✔️ <a href="https://www.google.com">Google</a>

如果是站內頁面，請檢查：

檔名是否正確（about.html vs About.html）
檔案是否真的存在於指定資料夾中

Q8：看完這篇 HTML5 常用標籤教學後，下一步可以學什麼？

建議的學習路線可以是：

CSS：讓整個網站變得有設計感（顏色、字體、間距、版面）
RWD 概念 + Flexbox / Grid：讓網站在手機、平板、桌機都排版正常
JavaScript：加入互動效果（按鈕、捲動、表單驗證、動態內容）
前端框架（進階）：如 React、Vue，適合需要更大量互動與模組化的專案

只要先把本篇介紹的 HTML5 骨架與常用標籤打好基礎，後面要接 CSS、JavaScript 會順利很多。

九、從常用標籤開始，穩扎穩打學 HTML5 網站設計

HTML5 看起來標籤很多、語法很長，但其實只要先搞懂：

一個 HTML5 網頁的基本骨架
排版相關標籤：標題、段落、清單、表格
超連結與導覽列的寫法
圖片與語意標籤的基本概念

你就已經踏出「HTML5 網站設計」非常關鍵的第一步。
之後只要慢慢加上 CSS 和 JavaScript，就能從一份簡單的教學範例，進化成真正可用的品牌官網或個人作品集。

PREV NEXT

回到列表