HTML 標籤辭典 126 個

每個標籤做什麼、要不要寫閉合標籤、常配哪些屬性，一行說清。

文件骨架5

每份文件都有的骨架，順序和位置都是定死的。

<html>整份文件的最外層，語言就寫在它的 lang 屬性上。<head>放不顯示在頁面上的資訊 —— 標題、樣式、中繼資料都在這兒。<body>實際顯示出來的內容全部裝在這裡。<title>瀏覽器分頁和搜尋結果上顯示的標題。<base>給頁內所有相對連結定一個共同的起點。

分區17

把文件切成有意義的區塊。搜尋引擎和螢幕閱讀器就順著這個結構走。

<header>一段內容開頭的部分 —— 標題、導覽之類。一頁裡可以有好幾個。<nav>主要的導覽連結區。螢幕閱讀器靠它跳轉。<main>這一頁的主要內容，一頁只能有一個。<section>有主題的一段內容，通常配一個標題。<article>拿出去單獨看也說得通的一塊內容，比如一篇文章。<aside>和正文相關但不是主線的旁支內容。<footer>一段內容結尾的部分 —— 版權、聯絡方式之類。<div>沒有語意的區塊盒子。找不到合適的標籤時才用它。<h1>這一頁最高一級的標題，通常只寫一個。<h2>第二級標題，用來切分大的段落。<h3>第三級標題，切分 h2 底下的內容。<h4>第四級標題，用在 h3 之下。<h5>第五級標題，實際上很少會用到。<h6>最低一級的標題，很少需要用到。<hgroup>把標題和它的副標題綁在一起。<address>這段內容的聯絡方式。不是用來寫普通地址的。<search>包住搜尋框那一塊的容器。

文字7

段落、引用、程式碼區塊這類成塊流動的文字。

<p>一個段落。段與段之間瀏覽器會自動留空。<br>強制換行。段落之間不該用它來留空。<hr>話題轉換的分隔。以前只是一條橫線，現在有了語意。<pre>原樣保留空格和換行，程式碼區塊常配 code 一起用。<blockquote>整段的引用。出處寫在 cite 屬性裡。<figure>圖片、圖表這類可以獨立看的插入內容。<figcaption>figure 的說明文字。

行內標記30

只標出一句話裡的一部分，不會另起一行。

<a>通往別處的連結。沒有 href 就只是個占位，算不上連結。<span>行內的無義盒子，用來給一句話裡的某段單獨設樣式。<strong>表示重要。看起來變粗只是附帶結果，不是目的。<em>表示強調。螢幕閱讀器會把語氣讀出來。<b>只是想讓它粗一點，不帶任何輕重之分。<i>換一種語氣的文字 —— 術語、外來語、想法。<u>標出非文字性的註記，比如拼字錯誤。別拿它當連結用。<s>已經不再正確的內容。刪掉的內容要用 del。<mark>像螢光筆一樣標出和當下相關的部分。<small>免責聲明、版權這類附帶的小字。<sub>下標。化學式的 H₂O 就靠它。<sup>上標。平方和註腳號碼用它。<code>一小段程式碼或者變數名。<kbd>要使用者按下的那個按鍵，比如 Ctrl。<samp>程式吐出來的輸出內容。<var>數學式或程式裡的一個變數名。<q>短短的行內引用。引號由瀏覽器按語言自動加。<cite>作品的名字 —— 書名、片名之類。<abbr>縮寫。全稱寫在 title 屬性裡。<time>機器能讀的日期或時間，寫在 datetime 屬性裡。<data>給一段文字配上機器能讀的值。<dfn>這個術語第一次下定義的地方。<bdi>把一段文字的書寫方向和周圍隔開。使用者名稱常需要。<bdo>強行指定這一段的書寫方向。<ruby>漢字上方標註讀音的注音結構。<rt>注音裡實際的讀音文字。<rp>給不支援注音的瀏覽器留的括號。<wbr>長字串裡允許換行的位置。<ins>後來加進去的內容，預設帶底線。<del>被刪掉的內容，預設帶刪除線。

清單7

有序或無序的清單，還有術語解釋。

<ul>先後順序無所謂的清單，前面畫圓點。<ol>順序有意義的清單，會自動編號。<li>清單裡的一項，裝在 ul 或 ol 中。<dl>名詞和解釋成對出現的清單。<dt>被解釋的那個詞條，dd 緊跟在它後面。<dd>對上面那個名詞的解釋。<menu>一組命令按鈕的清單，瀏覽器當成 ul 處理。

表格10

橫豎排開的資料。不是拿來排版面的。

<table>列欄構成的資料表。別拿它排版面。<thead>表格最上面的表頭那幾列。<tbody>表格正文裡裝資料的那些列。<tfoot>表格底部的合計那幾列。<tr>表格裡橫著的一列，裡面裝 th 或 td。<th>表頭格。scope 屬性告訴螢幕閱讀器它管哪一片。<td>表格裡裝普通資料的一格。<caption>整張表格的標題，寫在 table 的最前面。<colgroup>把若干欄綁成一組，好一起設樣式。<col>單獨指定某一直欄的樣式。

輸入14

接收並送出值的各種輸入。

<form>把輸入的內容打包送出去的表單。<input>輸入的格子。type 一變，它的樣子和行為就完全不同。<textarea>可以換行的多行文字輸入框。<button>可以按的按鈕。表單裡預設是送出。<select>點開會掉下來的下拉選單。<option>下拉選單裡可選的一項。<optgroup>把下拉選單裡的選項分成幾組。<label>輸入框的說明文字。點它就等於點那個輸入框。<fieldset>把相關的幾個輸入框圈成一組。<legend>fieldset 那一組輸入框的標題。<datalist>給輸入框配的候選詞，但仍可自由輸入。<output>用來顯示算出來的結果。<progress>進度條，表示做完了多少。<meter>在已知範圍裡的一個量，比如磁碟用量。

影像·聲音·影片10

影像、聲音、影片，以及現畫出來的畫面。

<img>插入圖片。alt 屬性用來說明它畫了什麼。<picture>按螢幕條件在幾張圖裡挑一張。<source>給 picture、video、audio 提供備選的來源。<video>把影片嵌進頁面，自帶播放控制項。<audio>把聲音嵌進頁面，自帶播放控制項。<track>給影音配的字幕或說明軌。<canvas>用腳本一筆一筆畫出來的畫布。<svg>直接寫在頁面裡的向量圖，放大也不糊。<map>給圖片劃出可點擊區域的地圖。<area>圖片地圖裡的一塊可點擊區域。

嵌入4

把別的文件或資源嵌進本頁。

腳本與樣式5

給文件加上行為和外觀。

文件資訊2

給瀏覽器和搜尋引擎讀的資訊，不是給人看的。

展開收合3

不寫 JavaScript 也能點開點合的那些。

<details>可以摺疊展開的一塊內容。<summary>摺疊區塊上那行一直看得見的標題。<dialog>對話框。加 modal 會擋住後面的內容。

已不再使用12

已經退出標準的標籤，只在讀舊文件時才會遇到。

<center>置中排版的舊標籤。現在用 CSS 的 text-align。<font>設定字型顏色大小的舊標籤，已被 CSS 取代。<marquee>讓文字捲動的舊標籤。別再用了。<blink>讓文字閃爍的舊標籤，瀏覽器早就不理它了。<big>把字調大一號的舊標籤。<strike>畫刪除線的舊標籤，現在用 del 或 s。<tt>等寬字型的舊標籤，現在用 code 或 CSS。<frame>舊式框架集裡的一格，早已廢棄。<frameset>把視窗切成幾格的舊方式，已被 iframe 取代。<acronym>首字母縮寫的舊標籤，現在統一用 abbr。<applet>嵌入 Java 小程式的舊標籤，已經廢棄。<dir>目錄清單的舊標籤，現在用 ul。

怎麼看這一頁

標籤大多是開合成對的。只有 img、br 這種裡面沒內容的才不寫閉合標籤。
給空元素補一個 </br>，瀏覽器要麼當沒看見，要麼給你多出一個空行。
長什麼樣由 CSS 說了算。標籤說的是「這是什麼」，加粗、傾斜只是隨之而來的效果。
挑對語意的標籤，搜尋和螢幕閱讀會一起變好。全用 div 包起來，這些資訊就丟光了。

常見問題

Q. HTML 標籤一共有多少個？

還留在標準裡的大約 110 個，把廢棄的也算上就有 130 上下。這裡把現在還在用的和讀舊文件會碰到的合起來收了 126 個。

Q. 哪些標籤不用寫閉合標籤？

img、br、hr、input、meta、link 這些裡面裝不下內容的標籤。給它們補一個 </img>，瀏覽器會直接忽略。照 XHTML 的老習慣寫成 <br /> 也行，但在 HTML 裡加不加都一樣。

Q. div 和 section 有什麼區別？

div 是沒有語意的盒子，section 是帶標題的一個主題區塊。那個位置配得上一個標題，就用 section；只是想圈起來設個樣式，那就是 div。

Q. 標籤名可以寫成大寫嗎？

HTML 不分大小寫，<DIV> 照樣能跑。不過慣例是小寫，而且在 XHTML 和 SVG 這類遵守 XML 規則的地方，只有小寫才算數。

Q. 用了廢棄的標籤會怎樣？

大多數瀏覽器眼下還會畫出來。但它已經退出標準，哪天不認了也不奇怪，而且替代的做法早就有了 —— center 用 CSS，font 也用 CSS，marquee 用 CSS 動畫。