HTML 速查表
可搜尋、可列印的 HTML5 參考：文件骨架、語意標籤、連結、媒體、表格、表單、屬性與字元實體。免費。
Document skeleton & metadata
13<!DOCTYPE html>
HTML5 doctype, first line of the page
<html lang="en">
Root element; lang aids a11y and SEO
<meta charset="utf-8">
Character encoding, first in <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Required for responsive layouts
<title>Page title</title>
Tab label and search result title
<meta name="description" content="...">
Search snippet text (~150 chars)
<link rel="stylesheet" href="app.css">
Attach an external stylesheet
<script src="app.js" defer></script>
Load JS without blocking parsing
<link rel="icon" href="favicon.svg">
Favicon for the browser tab
<link rel="canonical" href="https://ex.com/page">
Preferred URL for duplicate pages
<meta property="og:title" content="...">
Open Graph: social share title
<meta property="og:image" content="...">
Social share preview image
<meta name="robots" content="noindex">
Keep the page out of search engines
Text content
14<h1>...</h1> to <h6>
Headings; one h1 per page is typical
<p>...</p>
Paragraph of text
<br> / <hr>
Line break / thematic divider
<strong> vs <b>
Importance vs purely visual bold
<em> vs <i>
Emphasis vs alternate-voice italics
<mark>highlight</mark>
Highlighted / relevant text
<small> / <s>
Fine print / no-longer-accurate text
<blockquote cite="url">
Long quotation from another source
<q>inline quote</q>
Short quote; browser adds quotes
<pre><code>...</code></pre>
Preformatted block of code
<abbr title="HyperText...">HTML</abbr>
Abbreviation with expansion tooltip
<time datetime="2026-07-27">
Machine-readable date or time
<sub> / <sup>
Subscript / superscript
<kbd>Ctrl+C</kbd>
Keyboard input
Semantic layout
12<header>
Intro content: logo, title, nav
<nav>
Major navigation link blocks
<main>
Primary content; exactly ONE per page
<article>
Self-contained piece (post, card)
<section>
Thematic group, ideally with a heading
<aside>
Tangential content: sidebar, callout
<footer>
Footer of the page or a section
<figure><figcaption>
Media with its caption
<address>
Contact info for its nearest article
<article><h2>...</h2></article>
Sections get their own heading level
<div>
No meaning; last resort for styling
<span>
Inline, meaningless hook for CSS/JS
Links & navigation
11<a href="https://example.com">
Basic hyperlink
<a href="#pricing">
Jump to the element with that id
<a href="mailto:hi@example.com">
Open the default mail client
<a href="tel:+1234567890">
Click-to-call phone link
target="_blank"
Open in a new tab
rel="noopener noreferrer"
Pair with _blank for safety/privacy
rel="nofollow"
Tell crawlers not to endorse the link
<a href="file.pdf" download>
Download instead of navigating
download="report-2026.pdf"
Suggest a filename for the download
<nav><ul><li><a>...</a></li></ul></nav>
Conventional site menu markup
<a href="#main" class="skip-link">
Skip-to-content link for keyboards
Images & media
12<img src="cat.jpg" alt="A sleeping cat">
alt is required; empty for decorative
<img ... width="800" height="600">
Reserve space, avoid layout shift
loading="lazy"
Defer offscreen images/iframes
decoding="async"
Decode off the main thread
srcset="s.jpg 480w, l.jpg 1024w" sizes="100vw"
Responsive image candidates
<picture><source type="image/webp" ...><img ...></picture>
Format/art-direction fallback
<video src="clip.mp4" controls poster="cover.jpg">
Video player with preview image
<video autoplay muted loop playsinline>
Background video that autoplays
<audio src="talk.mp3" controls>
Audio player
<source src="v.webm" type="video/webm">
Multiple formats inside video/audio
<track kind="captions" src="en.vtt" srclang="en">
Captions/subtitles for video
<figure><img ...><figcaption>...</figcaption></figure>
Captioned image
Lists & tables
11<ul><li>...</li></ul>
Unordered (bulleted) list
<ol><li>...</li></ol>
Ordered (numbered) list
<ol start="5" reversed>
Custom start / count down
<ol type="a">
Numbering style: 1, a, A, i, I
<dl><dt>Term</dt><dd>Definition</dd></dl>
Description (key-value) list
<table><thead><tbody><tfoot>
Table with semantic row groups
<caption>Sales 2026</caption>
Accessible table title
<th scope="col"> / scope="row"
Header cells tied to col or row
<td colspan="2"> / rowspan="2">
Cell spanning columns / rows
<colgroup><col span="2" class="wide">
Style whole columns at once
Nested list: <li>...<ul>...</ul></li>
Sub-list goes INSIDE the li
Forms: input types
14<input type="text">
Single-line text (the default)
<input type="email">
Validates format; email keyboard
<input type="password">
Masked input
<input type="number" min="0" step="1">
Numeric with spinner
<input type="tel"> / type="url">
Phone / URL with fitting keyboards
<input type="search">
Search field with clear button
<input type="date"> / "time" / "datetime-local"
Native date and time pickers
<input type="color">
Native color picker
<input type="range" min="0" max="100">
Slider control
<input type="file" accept="image/*" multiple>
File upload with type filter
<input type="checkbox" checked>
On/off toggle
<input type="radio" name="plan">
Same name = one choice per group
<input type="hidden" name="token">
Submitted but not displayed
<input type="submit"> / <button>
Submit the surrounding form
Forms: structure & validation
15<form action="/save" method="post">
Where and how the data is sent
<label for="email">
Ties the label to input id="email"
<label>Email <input ...></label>
Wrapping works without for/id
name="email"
The key used in the submitted data
required
Blocks submit while empty
pattern="[0-9]{4}"
Regex the value must fully match
minlength / maxlength
Text length constraints
min / max / step
Constraints for numbers and dates
placeholder="you@example.com"
Hint text; NOT a label substitute
autocomplete="email"
Help browsers autofill correctly
<select><optgroup><option>
Dropdown with grouped options
<textarea rows="4" name="msg">
Multi-line text input
<fieldset><legend>Shipping</legend>
Group related fields with a title
<input list="fruits"><datalist id="fruits">
Text input with suggestions
<form novalidate>
Skip built-in validation on submit
Interactive elements
13<details><summary>More</summary>...</details>
Native disclosure, no JS needed
<details open>
Expanded by default
<details name="faq">
Same name = exclusive accordion
<dialog id="dlg">...</dialog>
Native modal/dialog element
dlg.showModal() / dlg.close()
Open as modal with backdrop / close
<form method="dialog">
Submit closes the parent dialog
::backdrop
Style the dimmed area behind a modal
<div popover id="tip">...</div>
Top-layer popover, light-dismiss
<button popovertarget="tip">
Toggle a popover without JS
<progress value="70" max="100">
Task progress bar
<meter value="0.6" low="0.3" high="0.8">
Gauge within a known range
<output for="a b">
Result of a calculation in a form
<button type="button">
Button that does NOT submit forms
Embedded content
11<iframe src="https://ex.com" title="Map">
Embed a page; title is required a11y
<iframe sandbox="allow-scripts">
Restrict what the frame may do
<iframe allow="fullscreen; autoplay">
Grant specific feature permissions
<iframe loading="lazy">
Defer offscreen embeds (maps, videos)
<canvas id="chart" width="600" height="300">
Scriptable bitmap drawing surface
canvas.getContext('2d')
Get the 2D drawing API
<svg viewBox="0 0 100 100">...</svg>
Inline vector graphics, CSS-stylable
<svg><use href="#icon-x"/></svg>
Reuse a defined SVG symbol
<object data="doc.pdf" type="application/pdf">
Embed a PDF or other resource
<embed src="file.svg">
Legacy embed for plugin content
<noscript>...</noscript>
Fallback when JS is disabled
Global attributes
14id="unique-name"
Unique hook for CSS, JS, anchors
class="card featured"
Space-separated style hooks
data-user-id="42"
Custom data; el.dataset.userId in JS
title="Tooltip text"
Hover tooltip (not touch-friendly)
hidden
Remove from display and a11y tree
tabindex="0" / "-1"
Make focusable / focus via JS only
contenteditable="true"
Let users edit the element inline
spellcheck="false"
Disable spell checking
lang="fr" / dir="rtl"
Per-element language and direction
draggable="true"
Enable native drag and drop
inert
Block focus and clicks on a subtree
aria-label="Close"
Accessible name for icon buttons
aria-hidden="true"
Hide decorative bits from readers
role="alert"
ARIA role when no semantic tag fits
Entities & special characters
12&
&: must be escaped in HTML
< / >
< and >: escape to show tags as text
" / '
Double / single quote in attributes
Non-breaking space (no line wrap)
© / ® / ™
Copyright, registered, trademark
: / –
Em dash: and en dash –
…
Ellipsis …
→ / ←
Right / left arrows
× / ÷
Multiplication and division signs
€ / £ / ¥
Currency symbols
👍
Any Unicode char by decimal code
<meta charset="utf-8"> first
With UTF-8, most chars need no entity
沒有條目符合「:q」。
關於 HTML 速查表
這份 HTML 速查表把整套標籤詞彙放在一個可搜尋的頁面上：文件骨架與中繼資料、文字內容、語意化版面、連結與導覽、圖片與媒體、清單與表格、表單輸入類型、表單結構與驗證、互動元素、嵌入內容、全域屬性，以及字元實體與特殊字元。
It is as useful for the details as for the tags: which input type to use for a date or a colour, the required and pattern validation attributes, the semantic difference between article, section and aside, or the entity code for a non-breaking space and a curly quote.
此速查表免費且在用戶端執行：用搜尋框即時篩選列、用固定的目錄在各段落間跳轉、一鍵複製任何程式碼片段，並可列印頁面作為桌邊參考。
如何使用 HTML 速查表
- 瀏覽各段落，從「文件骨架與中繼資料」、「語意化版面」到「表單」，再到「字元實體」。
- 搜尋 picture、aria-label 或 required 等標籤或屬性，即時篩選每一列。
- 需要為欄位選擇合適的控制項時，跳到「表單：輸入類型」。
- 點選程式碼片段或其複製圖示，即可將 HTML 複製到剪貼簿。
- 列印速查表，取得離線的 HTML 參考。
常見問題
共十二個段落：文件骨架與中繼資料、文字內容、語意化版面、連結與導覽、圖片與媒體、清單與表格、表單輸入類型、表單結構與驗證、互動元素、嵌入內容、全域屬性，以及字元實體與特殊字元。
是的。它以現代 HTML5 為基礎：語意化區段元素、完整的 input 類型、原生驗證屬性、picture 與 video、details 與 dialog。
有兩個段落：一個列出每種 input 類型及其用途，另一個涵蓋 label、fieldset、required、pattern、min 與 max 以及其他原生驗證。
可以。點選任一程式碼片段或滑過時出現的複製圖示，就會複製到剪貼簿，並顯示簡短確認。
是的，完全免費：可搜尋、可列印，在瀏覽器中呈現，無需註冊。
熱門搜尋
html 速查表
html 標籤列表
html5 語意標籤
html 表單 input 類型
html 表格語法
html 字元實體列表
html 屬性參考
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。