リファレンス
HTMLタグ早見表
よく使う HTML タグを、用途べつに一覧にまとめました。「あのタグ何だっけ？」を、 ここでサッと引けます。それぞれの見出しから、くわしく学べるレッスンにも飛べます。
見出しと文章
レッスン: 見出しと段落 →| タグ | 意味 | 何をする |
|---|---|---|
<h1>〜<h6> | 見出し | 文章の見出し。h1がいちばん大きく、h6がいちばん小さい |
<p> | 段落 | ふつうの文章のひとかたまり |
<br> | 改行 | 文の途中で行を変える（はさまないタグ） |
<strong> | 重要 | とくに大事な部分。多くは太字になる |
<em> | 強調 | 言葉に力を込める。多くは斜体になる |
引用とメモ
レッスン: 引用をあらわそう →| タグ | 意味 | 何をする |
|---|---|---|
<blockquote> | 引用 | まとまった文章の引用 |
<q> | 短い引用 | 文中の短い引用（引用符が自動でつく） |
<cite> | 出典 | 作品名や引用元を示す |
<!-- --> | コメント | 画面に出ないメモ。囲んだ部分は表示されない |
| タグ | 意味 | 何をする |
|---|---|---|
<ul> | 順序なしリスト | 黒点の箇条書き（並び順に意味がないとき） |
<ol> | 順序ありリスト | 番号つきの箇条書き（手順を書くとき） |
<li> | 項目 | リストのひとつひとつの項目 |
<dl> | 定義リスト | 「用語と説明」がペアで並ぶリスト |
<dt> | 用語 | 定義リストの、説明される言葉 |
<dd> | 説明 | 定義リストの、用語の説明 |
リンク / 画像 / メディア
レッスン: リンクで他のページへ →| タグ | 意味 | 何をする |
|---|---|---|
<a> | リンク | クリックで別のページへ飛ぶ（href に行き先） |
<img> | 画像 | 画像を表示（src に場所、alt に説明） |
<figure> | 図 | 画像とキャプションをひとまとめにする箱 |
<figcaption> | キャプション | 画像に添える説明文 |
<video> | 動画 | 再生ボタン付きの動画プレーヤー |
<audio> | 音声 | 再生ボタン付きの音声プレーヤー |
| タグ | 意味 | 何をする |
|---|---|---|
<table> | 表 | 表全体を包む箱 |
<tr> | 行 | 表の横一列 |
<th> | 見出しマス | 表の見出しセル（多くは太字で中央寄せ） |
<td> | マス | 表のふつうのセル（中身） |
まとまりと入力
レッスン: まとまりを作ろう →| タグ | 意味 | 何をする |
|---|---|---|
<div> | ブロックの箱 | 意味を持たないまとまり（縦に積む） |
<span> | 文中の箱 | 意味を持たないまとまり（行を変えない） |
<form> | フォーム | 入力欄やボタンをまとめて送り出す |
<label> | ラベル | 入力欄が「何の欄か」を示す |
<input> | 入力欄 | 文字を打ち込む欄（typeで種類が変わる） |
<button> | ボタン | 押せるボタン |
まぎらわしいタグの違い
見た目が似ていて迷いやすいタグを、ペアで並べました。「意味」で選ぶのがコツです。
<p> と <span> の違い
<p>段落。ブロック要素なので前後で改行され、上から下へ積まれる
<span>文中のひとつまみ。インライン要素なので行を変えず、文章の流れにおさまる
<div> と <span> の違い
<div>ブロックのまとまり（縦に積む）。意味は持たない箱
<span>インラインのまとまり（行を変えない）。意味は持たない箱
<strong> と <em> の違い
<strong>「ここは重要」という意味。多くのブラウザで太字になる
<em>「言葉に力を込める」ニュアンス。多くのブラウザで斜体になる
<ul> と <ol> の違い
<ul>順序なしリスト。黒点で並ぶ。並び順に意味がないとき
<ol>順序ありリスト。番号で並ぶ。手順のように順番に意味があるとき