HTMLタグ126個の辞典

それぞれのタグが何をするか、閉じタグが要るか、よく使う属性は何かを一行でまとめました。

文書の骨組み5

どの文書も持つ骨組みです。順序と置き場所が決まっています。

<html>文書全体を包む根の要素です。lang属性で文書の言語を伝えます。<head>画面に表示しない文書情報を入れます。タイトル・メタ・スタイルがここに入ります。<body>画面に見える内容はすべてこの中に入ります。<title>ブラウザーのタブや検索結果に出る文書のタイトルです。<base>文書内の相対アドレスの基準となるURLを決めます。

区画17

文書を意味のあるかたまりに分けます。検索や読み上げはこの構造をたどります。

<header>一つの区画の冒頭部分です。見出しやロゴ、案内が入ります。<nav>主要な移動リンクのまとまりです。すべてのリンク群ではなく道案内だけを包みます。<main>その文書の本題です。1ページに一つだけ置き、ヘッダーとフッターは含めません。<section>見出しを持つ一つの主題のまとまりです。意味のない箱として使ってはいけません。<article>それだけ切り離しても意味が通る内容です。記事・投稿・コメントなどです。<aside>本文の脇に添える内容です。取り除いても本文はそのまま読めます。<footer>一つの区画の末尾です。著作権表示や連絡先、関連リンクが入ります。<div>意味を持たない箱です。ほかのタグで表せないときだけ使います。<h1>その文書でいちばん大きな見出しです。1文書に一つが原則です。<h2>h1の一つ下の見出しです。大きな区分けに使います。<h3>h2の中をさらに分ける見出しです。<h4>四段目の見出しです。ここまで下がるなら構造を見直す頃合いです。<h5>五段目の見出しです。実際に使われることはまれです。<h6>六段目でいちばん小さい見出しです。<hgroup>見出しとそれに付く副題を一つのまとまりにします。<address>その文章や文書の連絡先を示します。一般の住所を書く場所ではありません。<search>検索のための入力のまとまりであることを示します。比較的新しく標準になった要素です。

文章のかたまり7

段落や引用、コードのように一つのかたまりで流れる文章です。

<p>一つの段落です。閉じタグを省いてもブラウザーが閉じてくれます。<br>改行一つです。段落の間隔を空ける目的で使ってはいけません。<hr>話題が変わる位置を表します。単なる横線の飾りではありません。<pre>書いたそのままを表示します。空白と改行が保たれます。<blockquote>ほかから引いた長い引用です。cite属性に出典のURLを書きます。<figure>本文から参照する図やコードのまとまりです。位置を移しても意味が保たれます。<figcaption>figureに付く説明です。figureの中の先頭か末尾に置きます。

文中の表示30

行を改めずに文中の一部だけを示します。

<a>ほかへ移動するリンクです。hrefがなければリンクではなく仮の印になります。<span>文中を意味なく包む箱です。色や書体だけ変えたいときに使います。<strong>重要であるという意味です。太く見えるのは結果にすぎません。<em>声に出すとき力を入れて読む部分です。斜体はその表れにすぎません。<b>意味の強調なしに目立たせるだけです。重要ならstrongを使います。<i>調子の違う言葉を表します。外来語や学名、心の中の言葉に使います。<u>綴りの誤りなど、別途印が必要な部分に下線を引きます。<s>もう正しくない内容に取り消し線を引きます。編集履歴にはdelを使います。<mark>読む人にとって重要な部分を蛍光ペンのように示します。<small>免責事項や著作権表示のような添え書きです。<sub>下付き文字です。H₂Oの2のように使います。<sup>上付き文字です。累乗や脚注番号に使います。<code>コードの断片です。ふつう等幅フォントで表示されます。<kbd>利用者が押すキーを表します。CtrlやEnterのように使います。<samp>プログラムが出した出力です。<var>数式やコード中の変数名です。<q>文中に入る短い引用です。引用符はブラウザーが付けます。<cite>作品の題名を表します。人の名前には使いません。<abbr>略語です。title属性に元の語を書いておきます。<time>日付や時刻です。datetime属性に機械が読める形式で書きます。<data>画面に見える値の横に、機械が読む値を添えます。<dfn>その場で初めて定義される語を表します。<bdi>文字の向きが違う文が周囲を乱さないよう囲い込みます。<bdo>文字の向きを強制的に変えます。dir属性が必須です。<ruby>漢字の上に読み方を添える表記です。rtと一緒に使います。<rt>rubyの中で実際の読み方が入る場所です。<rp>rubyを描けないブラウザーで代わりに見せる括弧です。<wbr>ここで改行してもよいと知らせます。長いURLに使います。<ins>あとから加えられた部分です。文書の修正履歴を残すときに使います。<del>削除された部分です。insと対にして修正履歴を見せます。

一覧7

順序のある一覧、ない一覧、用語の解説です。

<ul>順序のない一覧です。項目を入れ替えても意味は変わりません。<ol>順序のある一覧です。startで開始番号を、reversedで逆順にできます。<li>一覧の中の一項目です。ulかolの中でのみ使います。<dl>用語と説明を組にして並べる一覧です。<dt>dlの中で説明される用語のほうです。<dd>dtに付く説明のほうです。一つの用語に複数付けられます。<menu>命令や道具を並べる一覧です。現在はulと同じ扱いです。

表10

縦横に並ぶデータです。画面の配置用ではありません。

<table>縦横に並ぶデータを入れます。画面の配置目的では使いません。<thead>表の見出し行のまとまりです。印刷時にページごとに繰り返されます。<tbody>表の本体行のまとまりです。書かなくてもブラウザーが補います。<tfoot>表の最下部の要約行です。合計を入れるときに使います。<tr>表の一行です。中にthやtdが入ります。<th>見出しのセルです。scopeでその見出しが行か列かを示します。<td>データが入るセルです。colspanとrowspanでセルを結合します。<caption>表全体の題名です。tableの中の先頭に置きます。<colgroup>列をまとめて扱います。列単位のスタイル指定に使います。<col>colgroupの中で列一つ(またはspanの数だけ)を指します。

入力14

値を受け取って送る入力たちです。

<form>入力をまとめて送る単位です。actionに送り先、methodに方式を書きます。<input>一つの入力欄です。type一つで文字・数値・日付・色・ファイルになります。<textarea>複数行を受け取る入力欄です。初期値はタグの間に書きます。<button>押すボタンです。form内でtypeを省くと送信ボタンになります。<select>複数の値から一つを選ぶ一覧です。multipleを付ければ複数選べます。<option>selectの中の選択肢一つです。<optgroup>選択肢を分類ごとにまとめて見せます。<label>入力欄に付く名札です。forでつなぐと文字を押しても欄が選ばれます。<fieldset>関連する入力を枠でまとめます。disabledで一度に無効にできます。<legend>fieldsetの題名です。まとまりの先頭に置きます。<datalist>入力欄に出る候補一覧です。ほかの値もそのまま入力できます。<output>計算結果を入れる場所です。どの入力から出たかをforで示します。<progress>作業がどこまで進んだかを示すバーです。<meter>決まった範囲の中の値を目盛りで示します。進行率には使いません。

画像・音声・動画10

画像と音声、動画、そして自分で描く画面です。

<img>画像一枚です。altに画像が伝える内容を必ず書きます。<picture>画面の大きさや形式に応じて別の画像を選ばせます。<source>picture・video・audioの中で選べる候補の一つです。<video>動画を再生します。autoplayはmutedと一緒でないとたいてい動きません。<audio>音を再生します。controlsを付けないと画面には何も出ません。<track>動画に字幕や説明を付けます。WebVTTファイルを指します。<canvas>スクリプトで描く空の画面です。描いたものは文字として残りません。<svg>拡大しても崩れないベクター画像を文書内に直接描きます。<map>画像の上に押せる領域を重ねます。areaと一緒に使います。<area>mapの中の押せる一区画です。形と座標で範囲を決めます。

埋め込み4

ほかの文書や資源をこの文書に埋め込みます。

スクリプトとスタイル5

動きと見た目を文書に付けます。

文書情報2

人ではなくブラウザーや検索エンジンが読む情報です。

開閉3

JavaScriptなしで押して開閉するものです。

<details>折りたたんで開く箱です。JavaScriptなしで動きます。<summary>detailsが閉じているときに見える見出し行です。<dialog>ダイアログです。showModalで開くと背後の操作が止まります。

非推奨12

標準から退いたタグです。古い文書を読むときにだけ出会います。

読み方

タグはたいてい開くものと閉じるものが対になります。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もfontもCSSで、marqueeはCSSアニメーションで置き換えます。