HTML5 作為現代網頁開發的核心標準，引入了大量結構化元素與實用屬性，徹底改變了過去過度依賴無意義容器的排版方式。本文系統性整理 HTML5 的基本語法、全域屬性、表單控制元件、已廢棄標籤對照，並提供完整的 A-Z 標籤速查清單，幫助前端新手快速掌握語意化標劃設計，告別毫無結構的 div 海。
⚡ 快速跳轉：
HTML 目前版本
HTML5 是當前網頁開發的標準，提供了許多新元素和屬性來簡化開發並增強網頁功能。以下是 HTML5 語法的總整理，幫助您快速了解並應用這些新特性。
想了解 HTML 相關資訊，可以看看這兩篇:
基本語法
DOCTYPE
在 HTML5 中，DOCTYPE 宣告已被簡化，只需使用以下語法：
<!DOCTYPE html>字符編碼
在 HTML5 中，設定字符編碼的語法也被簡化：
<meta charset="UTF-8">Script 和 Link 標籤
HTML5 中的 <script> 和 <link> 標籤不再需要 type 屬性：
<script src="scriptfile.js"></script>
<link rel="stylesheet" href="stylefile.css">新增的 HTML5 元素
HTML5 引入了許多新元素來提高網頁語義性和功能性。例如：
| 類型 | 元素 | 描述 |
|---|---|---|
| 文章和段落標記 | <article>, <section>, <nav>, <aside>, <header>, <footer> | 提高網頁的語義性 |
| 媒體元素 | <audio>, <video>, <source>, <track> | 用於音頻和視頻內容 |
| 圖形元素 | <canvas>, <svg> | 支持繪圖和圖形渲染 |
| 表單元素 | <datalist>, <output>, <progress>, <meter> | 提升表單的功能性 |
| 互動元素 | <details>, <summary> | 增加互動性元素 |
HTML5 – 新增網頁語義標籤
語意標籤對 SEO 與無障礙網頁（a11y）的實際效益
在過去充滿 div 元素的網頁架構中，搜尋引擎機器人與螢幕閱讀器很難辨別哪些區塊是導覽、哪些是內文。HTML5 語意標籤的導入解決了這個痛點：
- SEO 搜尋引擎優化效益：搜尋引擎爬蟲（Crawler）會依據
<header>、<nav>、<article>與<footer>等標籤來精準抓取頁面的核心內容結構。例如，包在<article>內的文章內容會被認定為獨立且具備高參考價值的資訊主體，有助於提升關鍵字排名。 - 無障礙網頁（a11y）支援：視障使用者經常依賴螢幕閱讀器（Screen Reader）進行頁面導覽。當網頁正確使用
<nav>標籤時，輔助工具可以讓使用者直接跳過選單、快速定位至主內容區塊（<main>），大幅提升閱讀體驗與網站的無障礙合規性。
如果你想知道網頁製作最常使用的語意標籤有哪些，可以看看以下這篇
HTML5 語意標籤
全域屬性
HTML5 引入了多個全域屬性，這些屬性可以應用於所有 HTML 元素：
| 屬性 | 描述 |
|---|---|
id | 元素的唯一標識符 |
class | 元素的類名 |
style | 內聯樣式 |
data-* | 自定義數據屬性 |
hidden | 隱藏元素 |
HTML5 – 新增全域屬性
表單改進
HTML5 為表單新增了多種類型的輸入控件和屬性：
| 輸入類型 | 描述 |
|---|---|
email | 電子郵件地址 |
url | 網址 |
number | 數字 |
range | 範圍滑塊 |
date | 日期 |
datetime-local | 當地日期和時間 |
color | 顏色選擇器 |
required | 確保用戶填寫必填欄位 |
placeholder | 提供提示文本 |
HTML5 – 表單相關
新型態表單的驗證與行動裝置體驗優勢
過去在開發傳統表單時，開發者必須依賴大量的 JavaScript 或複雜的 Regular Expression（正規表達式）來驗證 Email 格式或數字範圍。HTML5 表單改進帶來了以下實務優勢：
- 原生驗證機制：透過
type="email"、type="url"與required等屬性，瀏覽器會在使用者送出表單時進行原生攔截與格式檢查，免去繁瑣的前端驗證程式碼。 - 行動裝置專屬鍵盤觸發：當使用者在手機或平板上點擊不同新型態的輸入框時，行動裝置作業系統會自動切換並彈出對應的專屬虛擬鍵盤。例如點擊
type="email"時，鍵盤會直接顯示@與.快速鍵；點擊type="number"時則會直接跳出純數字鍵盤，這對行動裝置的互動體驗帶來極大的提升。
廢棄/替代的元素標籤
HTML5 移除了許多過時的元素，這些元素已被新的、更語義化的標籤所取代：
| 元素 | 描述 | 狀態 | 替代標籤 |
|---|---|---|---|
<acronym> | 縮略詞 | 廢棄 | <abbr> |
<applet> | Java applet | 廢棄 | <object> |
<basefont> | 基本字體 | 廢棄 | CSS |
<big> | 大號字體 | 廢棄 | CSS |
<center> | 中心對齊 | 廢棄 | CSS |
<dir> | 目錄列表 | 廢棄 | <ul> |
<font> | 字體設置 | 廢棄 | CSS |
<frame> | 框架 | 廢棄 | – |
<frameset> | 框架集 | 廢棄 | – |
<noframes> | 不支持框架的內容 | 廢棄 | – |
<strike> | 刪除線文本 | 廢棄 | <s> |
<tt> | 打字機文本 | 廢棄 | CSS |
HTML5 – 棄用標籤整理 & 對應替代標籤
HTML5 標籤總整理表 (A-Z)
最後幫你整理出一份包含 HTML5 標籤的完整列表，按字母順序排列，每個標籤都附有簡短的說明和狀態，方便開發人員查閱。
這是一份包含 HTML5 標籤的完整列表，按字母順序排列，每個標籤都附有簡短的說明和狀態。
| 標籤 | 說明 | 狀態 |
|---|---|---|
<!-- --> | 註解 | 可用 |
<a> | 超連結、錨點 | 可用 |
<abbr> | 縮寫 | 可用 |
<address> | 聯絡信息標籤 | 可用 |
<area> | 圖像映射區域標籤 | 可用 |
<article> | 文章標籤，用於自包含的內容 | 可用 |
<aside> | 側邊欄標籤，表示非主要內容 | 可用 |
<audio> | 音頻內容標籤 | 可用 |
<b> | 粗體字標籤 | 可用 |
<base> | 指定網頁連結 | 可用 |
<bdi> | 雙向隔離文本 | 可用 |
<bdo> | 文字方向覆寫 | 可用 |
<blockquote> | 塊引用 | 可用 |
<body> | 網頁主體標籤 | 可用 |
<br> | 換行標籤 | 可用 |
<button> | 按鈕標籤 | 可用 |
<canvas> | 畫布標籤，用於繪製圖形 | 可用 |
<caption> | 表格標題 | 可用 |
<cite> | 引用標籤 | 可用 |
<code> | 程式碼標籤 | 可用 |
<col> | 表格列標籤 | 可用 |
<colgroup> | 表格列群組標籤 | 可用 |
<data> | 錨數據 | 可用 |
<datalist> | 預定義選項列表 | 可用 |
<dd> | 定義描述標籤 | 可用 |
<del> | 刪除文本標籤 | 可用 |
<details> | 詳情標籤，用於可展開的詳細內容 | 可用 |
<dfn> | 定義標籤 | 可用 |
<dialog> | 對話框標籤 | 可用 |
<div> | 分區或區段標籤 | 可用 |
<dl> | 定義列表標籤 | 可用 |
<dt> | 定義項目標籤 | 可用 |
<em> | 強調標籤 | 可用 |
<embed> | 嵌入外部內容標籤 | 可用 |
<fieldset> | 表單欄位集 | 可用 |
<figcaption> | 圖例標題 | 可用 |
<figure> | 圖例標籤 | 可用 |
<footer> | 頁腳標籤 | 可用 |
<form> | 表單標籤 | 可用 |
<h1> | 標題 1 | 可用 |
<h2> | 標題 2 | 可用 |
<h3> | 標題 3 | 可用 |
<h4> | 標題 4 | 可用 |
<h5> | 標題 5 | 可用 |
<h6> | 標題 6 | 可用 |
<head> | 頁首標籤 | 可用 |
<header> | 頁眉標籤 | 可用 |
<hgroup> | 標題群組標籤 | 可用 |
<hr> | 水平線標籤 | 可用 |
<html> | 根元素標籤 | 可用 |
<i> | 斜體字標籤 | 可用 |
<iframe> | 嵌入框架 | 可用 |
<img> | 圖像標籤 | 可用 |
<input> | 輸入控件標籤 | 可用 |
<ins> | 插入文本標籤 | 可用 |
<kbd> | 鍵盤輸入標籤 | 可用 |
<label> | 表單標籤 | 可用 |
<legend> | 表單說明 | 可用 |
<li> | 列表項標籤 | 可用 |
<link> | 連結標籤 | 可用 |
<main> | 主內容標籤 | 可用 |
<map> | 圖像映射標籤 | 可用 |
<mark> | 標記文本標籤 | 可用 |
<menu> | 菜單列表標籤 | 可用 |
<meta> | 元數據標籤 | 可用 |
<meter> | 測量值標籤 | 可用 |
<nav> | 導航連結標籤 | 可用 |
<noscript> | 不支持腳本 | 可用 |
<object> | 插入對象標籤 | 可用 |
<ol> | 有序列表標籤 | 可用 |
<optgroup> | 選項組標籤 | 可用 |
<option> | 選項標籤 | 可用 |
<output> | 輸出標籤 | 可用 |
<p> | 段落標籤 | 可用 |
<param> | 參數標籤 | 可用 |
<picture> | 圖像元素 | 可用 |
<pre> | 預格式化文本 | 可用 |
<progress> | 進度條標籤 | 可用 |
<q> | 短引用標籤 | 可用 |
<rp> | Ruby 避免標籤 | 可用 |
<rt> | Ruby 文本標籤 | 可用 |
<ruby> | Ruby 註釋標籤 | 可用 |
<s> | 刪除線標籤 | 可用 |
<samp> | 範例輸出標籤 | 可用 |
<script> | 腳本標籤 | 可用 |
<section> | 區段標籤 | 可用 |
<select> | 選擇控件標籤 | 可用 |
<small> | 小字標籤 | 可用 |
<source> | 媒體資源標籤 | 可用 |
<span> | 範圍標籤 | 可用 |
<strong> | 強調標籤 | 可用 |
<style> | 樣式標籤 | 可用 |
<sub> | 下標標籤 | 可用 |
<summary> | 詳情摘要 | 可用 |
<sup> | 上標標籤 | 可用 |
<table> | 表格標籤 | 可用 |
<tbody> | 表格主體 | 可用 |
<td> | 表格單元格 | 可用 |
<template> | 模板標籤 | 可用 |
<textarea> | 多行文本輸入 | 可用 |
<tfoot> | 表格表尾 | 可用 |
<th> | 表格頭部單元格 | 可用 |
<thead> | 表格頭部 | 可用 |
<time> | 時間標籤 | 可用 |
<title> | 標題標籤 | 可用 |
<tr> | 表格行 | 可用 |
<track> | 媒體字幕標籤 | 可用 |
<u> | 下劃線標籤 | 可用 |
<ul> | 無序列表標籤 | 可用 |
<var> | 變數標籤 | 可用 |
<video> | 視頻標籤 | 可用 |
<wbr> | 強制換行標籤 | 可用 |
2024 HTML5 標籤總整理表
參考資料與延伸閱讀
- MDN Web Docs：HTML 元素參考（包含所有語意與結構化標籤）
- MDN Web Docs：HTML 全域屬性（Global attributes）規範
- WHATUG HTML Living Standard：文件結構與語意標籤規範
- MDN Web Docs：HTML 表單輸入控制元件（input）型態說明
- WHATWG HTML Living Standard：已廢棄與過時的 HTML 元素規範
- 延伸閱讀：React Compiler 完全解析：不用再手動寫 useMemo 與 useCallback 的全新自動化優化機制
- 延伸閱讀：別再只用 div 與 span：HTML Inline vs Block 內聯與區塊元素渲染邏輯與踩坑排錯
發佈留言