HTMLの主要タグを用途別の表に整理した一覧です。よく使うタグはコピペで使えるサンプル付きで、HTML5の追加・廃止タグや要素の分類までまとめて確認できます。
HTMLタグ一覧（用途別）
HTMLタグは、文書構造・テキスト・リンク・画像・リスト・表・フォームといった用途ごとに覚えると整理しやすいです。ここでは基本のタグを3つのグループに分けて、一覧表で紹介します。
文書構造・見出し・段落のタグ
ページの骨組みと文章を作る、最初に覚えたいタグは以下の通りです。
| タグ | 役割 |
|---|---|
<html> |
文書全体を囲むルート要素 |
<head> |
タイトルや文字コードなどページ情報を入れる |
<body> |
画面に表示される本文を入れる |
<title> |
ブラウザのタブに表示されるタイトル |
<meta> |
文字コードや説明文などの付加情報 |
<h1>〜<h6>
|
見出し(h1が最上位) |
<p> |
段落 |
<br> |
改行 |
<hr> |
区切り線(話題の転換) |
<div> |
意味を持たないブロックのまとまり |
この中でも<h1>〜<h6>と<p>は、ほぼ全てのページで使う基本のタグです。
リンク・画像・リストのタグ
ページ同士をつなぎ、情報を見やすく並べるタグは以下の通りです。
| タグ | 役割 |
|---|---|
<a> |
リンク(href属性で行き先を指定) |
<img> |
画像の表示 |
<ul> |
順序のないリスト(箇条書き) |
<ol> |
順序のあるリスト(番号付き) |
<li> |
リストの各項目 |
<dl> <dt> <dd>
|
用語と説明のセットを並べるリスト |
項目を一覧表示したいときは、<ul>と<li>の組み合わせが基本形です。
表・フォームのタグ
データの整理と入力欄の作成に使うタグは以下の通りです。
| タグ | 役割 |
|---|---|
<table> |
表全体を囲む |
<tr> |
表の行 |
<th> <td>
|
見出しセルとデータセル |
<form> |
入力フォーム全体を囲む |
<input> |
1行の入力欄・チェックボックスなど |
<textarea> |
複数行の入力欄 |
<select> <option>
|
プルダウンの選択肢 |
<button> |
ボタン |
<label> |
入力欄の項目名(入力欄と関連付ける) |
表とフォームは部品になるタグが多いため、親子関係(どのタグの中にどれを書くか)をセットで覚えると迷いません。
よく使うタグ早見・コピペ集
実際のページの大半は、ここまでに挙げた15個前後のタグで組み立てられます。以下は、よく使うタグを1つにまとめたコピペ用のサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>よく使うタグの例</title>
<style>
table, th, td { border: 1px solid #ccc; border-collapse: collapse; }
</style>
</head>
<body>
<h1>ページの見出し</h1>
<p>段落の文章です。<strong>重要な部分</strong>や<a href="#">リンク</a>を含められます。</p>
<ul>
<li>リストの項目1</li>
<li>リストの項目2</li>
</ul>
<table>
<tr><th>項目</th><td>内容</td></tr>
</table>
</body>
</html>
このひな形をコピーして書き換えれば、基本的なページをすぐに作れます。タグを1つずつ差し替えて、表示の変化を確かめてみてください。
HTML5で追加・廃止されたタグ
HTML5では<header>や<video>など意味や機能を持つタグが多数追加され、<center>や<font>など見た目だけを指定するタグが廃止されました。追加された主なタグは以下の通りです(構造系タグの詳しい役割は後述のセマンティックタグ一覧で解説します)。
| 追加されたタグ | 役割 |
|---|---|
<header> <footer>
|
上部・下部 |
<nav> |
メニュー |
<main> |
主要部分 |
<section> <article>
|
章・記事 |
<aside> |
補足 |
<video> <audio>
|
動画・音声の再生 |
<canvas> |
JavaScriptによる図形描画 |
一方、廃止・非推奨になった主なタグと置き換え先は以下の通りです。
| 廃止されたタグ | 置き換え先 |
|---|---|
<center> |
CSSのtext-alignなど |
<font> |
CSSのfont-sizeやcolor
|
<big> |
CSSのfont-size
|
<strike> |
<s>またはCSS |
<frame> <frameset>
|
<iframe> |
<acronym> |
<abbr> |
廃止タグは古いコードで見かけることがありますが、新しく書くページでは使わず、CSSや代替タグで表現します。
セマンティックタグ一覧
セマンティックタグとは、「ここはメニュー」「ここが本文」のように、その部分の意味を示すタグのことです。こうしたタグで文書構造を示す書き方はセマンティックHTMLとも呼ばれ、主なタグは以下の通りです。
| タグ | 示す意味 |
|---|---|
<header> |
ページや記事の導入部 |
<nav> |
主要なナビゲーション |
<main> |
ページの中心となる内容(1ページに1つ) |
<article> |
単体で完結する記事・投稿 |
<section> |
見出しを持つ章・節のまとまり |
<aside> |
本文と関連の薄い補足 |
<footer> |
ページや記事の末尾情報 |
<figure> <figcaption>
|
図版とキャプション |
<time> |
日付・時刻 |
意味のない<div>の代わりにセマンティックタグを使うと、検索エンジンや読み上げソフトがページの構造を理解しやすくなります。
ブロック要素・インライン要素一覧
ブロック要素は前後で改行されて縦に積まれる箱、インライン要素は文章の中に横に並ぶ部品とイメージすると分類できます。主なタグの分類は以下の通りです。
| 分類 | 主なタグ | 特徴 |
|---|---|---|
| ブロック要素 |
<div> <p> <h1>〜<h6> <ul> <ol> <table> <form> <section>
|
横幅いっぱいに広がり縦に並ぶ |
| インライン要素 |
<span> <a> <img> <strong> <em> <code> <small>
|
文中に収まり横に並ぶ |
現在のHTML仕様ではこの2分類は廃止され、コンテンツカテゴリという新しい分類に再編されています。ただし表示のされ方(CSSのdisplayの初期値)を理解する目安として、今もこの分け方が広く使われています。
文字装飾タグ一覧
文字の強調や注釈には、それぞれ意味を持つ装飾タグを使います。主な装飾タグは以下の通りです。
| タグ | 役割 |
|---|---|
<strong> |
重要性の強調(太字で表示) |
<b> |
意味を持たない太字 |
<em> |
語気の強調(斜体で表示) |
<i> |
専門用語・外国語句・学名などの慣用的な斜体(作品名は<cite>) |
<u> |
下線(注釈的な表現) |
<s> |
打ち消し線(無効になった情報) |
<small> |
注釈・免責などの細目 |
<mark> |
ハイライト(蛍光ペン風) |
<sub> <sup>
|
下付き文字・上付き文字 |
<code> |
プログラムコードの表記 |
同じ太字でも、読み上げソフトは<strong>と<b>を区別します。重要さを伝えたい場面では<strong>を選びます。
画像・メディア関連タグ一覧
画像は<img>、動画は<video>、音声は<audio>が基本のタグです。関連タグを含めた一覧は以下の通りです。
| タグ | 役割 |
|---|---|
<img> |
画像の表示(alt属性で代替テキストを指定) |
<picture> |
画面幅などに応じた画像の切り替え |
<source> |
画像・動画・音声の候補ファイルを指定 |
<video> |
動画の再生 |
<audio> |
音声の再生 |
<track> |
動画・音声への字幕の追加 |
<iframe> |
別ページや地図などの埋め込み |
<img>には画像の内容を説明するalt属性を必ず添えます。画像が表示できない環境や読み上げソフトで、内容を伝えるために必要です。
表(テーブル)関連タグ一覧
表は<table>を親にして、行を<tr>、セルを<th>と<td>で組み立てます。表を構成するタグの一覧は以下の通りです。
| タグ | 役割 |
|---|---|
<table> |
表全体を囲む |
<caption> |
表のタイトル |
<thead> |
見出し行のグループ |
<tbody> |
データ行のグループ |
<tfoot> |
合計などの末尾行のグループ |
<tr> |
1つの行 |
<th> |
見出しセル |
<td> |
データセル |
<colgroup> <col>
|
列単位の設定 |
セルの結合やデザインの整え方など、表の詳しい作り方はテーブル作成の解説ページで説明しています。ここでは構成タグの名前と役割を押さえておけば十分です。
HTMLタグ一覧に関するよくある質問
HTMLのコード一覧やコマンド一覧と、タグ一覧は同じものですか?
呼び方が違うだけで、指しているのは同じタグ(要素)の一覧です。なおHTMLのタグは命令(コマンド)ではなく、文章に意味付けをするマークアップと呼ばれる仕組みです。
HTMLタグは全部で何種類ありますか?
現行のHTML標準には100を超える要素が定義されており、全ての一覧はMDNのHTML要素リファレンスで確認できます。全部を暗記する必要はなく、よく使う20〜30個から覚えれば実用上は十分です。
おしゃれなデザインにできるタグはありますか?
見た目を華やかにする役割はHTMLタグではなくCSSが担当します。タグは文書の意味と構造を示すもので、色・フォント・レイアウトの装飾はCSSで指定します。
