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

一、先搞懂：什麼是 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>

PREV NEXT

回到列表