HTMLタグとは、Webページの構造や見た目を定義するための「命令文」です。タグを使ってテキスト・画像・リンクなどの要素を配置し、ブラウザがそれを解釈して表示します。
この記事では、Web制作でよく使うHTMLタグを用途別に一覧で解説します。コードサンプル付きなので、コピペしてすぐに使えます。
HTMLの基本構造タグ
すべてのHTMLファイルに必要な基本的なタグです。
<!DOCTYPE html>
HTMLのバージョンを宣言するタグです。現在はHTML5の宣言として以下を使います。
<!DOCTYPE html>
<html>
HTMLドキュメント全体を囲むルートタグです。lang属性で言語を指定します。
<html lang="ja">
...
</html>
<head>
ページのメタ情報（タイトル・文字コード・CSS読み込みなど）を記述するタグです。画面には表示されません。
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
実際にブラウザに表示されるコンテンツを記述するタグです。
<body>
<h1>見出し</h1>
<p>本文テキスト</p>
</body>
HTMLの基本構造（まとめ）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文テキスト</p>
</body>
</html>
メタデータタグ（headタグ内）
<meta>
ページの情報をブラウザや検索エンジンに伝えるタグです。
<!-- 文字コードの指定 -->
<meta charset="UTF-8">
<!-- レスポンシブ対応（スマホ表示） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO：ページの説明文 -->
<meta name="description" content="ページの説明文をここに記述します（120文字以内推奨）">
<title>
ブラウザのタブとGoogle検索結果に表示されるページタイトルです。
<title>HTMLタグ一覧 | Webサイト制作ノート</title>
<link>
外部ファイル（CSS・ファビコン等）を読み込むタグです。
<!-- CSSファイルの読み込み -->
<link rel="stylesheet" href="style.css">
<!-- ファビコンの設定 -->
<link rel="icon" href="favicon.ico">
セクション・レイアウトタグ
<header>
ページのヘッダー（ロゴ・ナビゲーション）を表すタグです。
<header>
<h1>サイト名</h1>
<nav>...</nav>
</header>
<nav>
ナビゲーションメニューを表すタグです。
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/html/">HTML</a></li>
</ul>
</nav>
<main>
ページのメインコンテンツを表すタグです。1ページに1回だけ使います。
<main>
<article>...</article>
</main>
<section>
テーマごとにコンテンツをグループ分けするタグです。
<section>
<h2>セクション見出し</h2>
<p>セクションの内容</p>
</section>
<article>
それ自体で独立したコンテンツ（記事・ブログポスト等）を表すタグです。
<article>
<h2>記事タイトル</h2>
<p>記事の内容</p>
</article>
<aside>
サイドバーや補足情報を表すタグです。
<aside>
<h2>関連記事</h2>
<ul>...</ul>
</aside>
<footer>
ページのフッター（著作権・リンク等）を表すタグです。
<footer>
<p>© 2025 Webサイト制作ノート</p>
</footer>
<div>
特定の意味を持たないブロック要素をグループ化するタグです。CSSでスタイルを当てるときによく使います。
<div class="card">
<h3>カードタイトル</h3>
<p>カードの内容</p>
</div>
見出しタグ
<h1>〜<h6>の6段階があります。数字が小さいほど重要な見出しです。
<h1>最上位の見出し（ページに1つ）</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
<h5>より小さな見出し</h5>
<h6>最小の見出し</h6>
SEOポイント：
<h1>はページ内に1つだけ使い、ページのメインテーマを表すキーワードを含めましょう。<h2>〜<h3>で内容を階層構造に整理すると、検索エンジンがページを理解しやすくなります。
テキストタグ
<p>（段落）
テキストの段落を表します。HTMLで最もよく使うタグの一つです。
<p>これは段落テキストです。</p>
<span>
テキストの一部にスタイルを当てたいときに使うインライン要素です。
<p>テキストの<span style="color: red;">ここだけ赤色</span>にします。</p>
<strong>（太字・重要）
重要なテキストを太字で表示します。<b>と見た目は似ていますが、<strong>は「意味的に重要」を示します。
<p><strong>重要な情報</strong>はこのように強調します。</p>
<em>（イタリック・強調）
強調テキストを斜体で表示します。
<p><em>強調したいテキスト</em>はemタグを使います。</p>
<br>（改行）
テキスト内で強制的に改行するタグです。終了タグは不要です。
<p>1行目のテキスト<br>2行目のテキスト</p>
<hr>（水平線）
水平線を表示するタグです。セクションの区切りに使います。
<hr>
リンクタグ
<a>（アンカー）
リンクを作成するタグです。href属性にリンク先URLを指定します。
<!-- 通常のリンク -->
<a href="https://awcs.org/">Webサイト制作ノート</a>
<!-- 別タブで開くリンク -->
<a href="https://awcs.org/" target="_blank" rel="noopener noreferrer">別タブで開く</a>
<!-- ページ内リンク（アンカーリンク） -->
<a href="#section1">セクション1へ移動</a>
<!-- メールリンク -->
<a href="mailto:example@example.com">メールを送る</a>
注意点：
target="_blank"で別タブを開くときは、必ずrel="noopener noreferrer"を一緒に付けましょう。セキュリティリスクを防ぐためです。
画像タグ
<img>（画像）
画像を表示するタグです。srcに画像のパス、altに代替テキストを指定します。
<!-- 基本的な書き方 -->
<img src="image.jpg" alt="画像の説明文">
<!-- 幅・高さを指定 -->
<img src="photo.jpg" alt="写真の説明" width="800" height="600">
<!-- 遅延読み込み（パフォーマンス改善） -->
<img src="image.jpg" alt="説明" loading="lazy">
SEOポイント：
alt属性（代替テキスト）は必ず設定しましょう。画像が表示できない場合の代替テキストとして使われるほか、検索エンジンが画像内容を理解するために使用します。
リストタグ
<ul>・<li>（箇条書きリスト）
順序なし（・マーク）のリストを作ります。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>・<li>（番号付きリスト）
番号付き（1, 2, 3…）のリストを作ります。
<ol>
<li>まず HTMLを学ぶ</li>
<li>次に CSSを学ぶ</li>
<li>最後に JavaScriptを学ぶ</li>
</ol>
<dl>・<dt>・<dd>（定義リスト）
用語とその説明を表すリストです。
<dl>
<dt>HTML</dt>
<dd>Webページの構造を定義する言語</dd>
<dt>CSS</dt>
<dd>Webページのスタイル・デザインを定義する言語</dd>
</dl>
テーブルタグ
表（テーブル）を作成するタグです。
<table>
<thead>
<tr>
<th>タグ名</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><p></td>
<td>段落テキスト</td>
</tr>
<tr>
<td><a></td>
<td>リンク</td>
</tr>
</tbody>
</table>
| タグ | 役割 |
|---|---|
<table> |
テーブル全体を囲む |
<thead> |
テーブルのヘッダー行グループ |
<tbody> |
テーブルの本文行グループ |
<tr> |
テーブルの1行 |
<th> |
ヘッダーセル（太字・中央揃え） |
<td> |
データセル |
フォームタグ
ユーザーが入力できるフォームを作成するタグです。
<form>
フォーム全体を囲むタグです。
<form action="/contact" method="post">
<!-- フォームの中身 -->
</form>
<input>
様々な種類の入力フィールドを作るタグです。type属性で種類を指定します。
<!-- テキスト入力 -->
<input type="text" name="name" placeholder="お名前">
<!-- メールアドレス入力 -->
<input type="email" name="email" placeholder="メールアドレス">
<!-- パスワード入力 -->
<input type="password" name="password">
<!-- 送信ボタン -->
<input type="submit" value="送信する">
<!-- チェックボックス -->
<input type="checkbox" name="agree" value="yes"> 同意する
<textarea>
複数行のテキスト入力エリアを作ります。
<textarea name="message" rows="5" placeholder="お問い合わせ内容"></textarea>
<select>・<option>
ドロップダウンメニューを作ります。
<select name="category">
<option value="">選択してください</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
<label>
入力フィールドにラベルを付けます。for属性とidを紐付けるとクリック領域が広がります。
<label for="name">お名前</label>
<input type="text" id="name" name="name">
<button>
クリック可能なボタンを作ります。
<button type="submit">送信する</button>
<button type="button">キャンセル</button>
メディアタグ
<video>
動画を埋め込むタグです。
<video src="movie.mp4" controls width="640" height="360">
お使いのブラウザは動画に対応していません。
</video>
<audio>
音声ファイルを埋め込むタグです。
<audio src="sound.mp3" controls></audio>
<iframe>
外部ページやGoogle Mapsを埋め込むタグです。
<!-- YouTube動画の埋め込み -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="動画タイトル"
allowfullscreen></iframe>
よく使うHTMLタグ一覧（早見表）
| タグ | 役割 | よく使う属性 |
|---|---|---|
<html> |
ドキュメントのルート | lang |
<head> |
メタ情報の格納 | — |
<body> |
表示コンテンツ | — |
<meta> |
ページ情報 | charset, name, content |
<title> |
ページタイトル | — |
<h1>〜<h6> |
見出し | — |
<p> |
段落 | — |
<a> |
リンク | href, target |
<img> |
画像 | src, alt, loading |
<ul> / <ol> |
リスト | — |
<li> |
リスト項目 | — |
<table> |
テーブル | — |
<div> |
ブロック要素のグループ | class, id |
<span> |
インライン要素のグループ | class, id |
<strong> |
重要テキスト（太字） | — |
<br> |
改行 | — |
<form> |
フォーム | action, method |
<input> |
入力フィールド | type, name, placeholder |
<button> |
ボタン | type |
<header> |
ヘッダー | — |
<nav> |
ナビゲーション | — |
<main> |
メインコンテンツ | — |
<footer> |
フッター | — |
よくある質問（FAQ）
Q. HTMLタグの数はいくつありますか？
HTML5では約110種類のタグが定義されています。ただし、実務でよく使うのは30〜40種類程度です。この記事で紹介したタグを覚えれば、大半のWebページは作れます。
Q. タグは大文字でも小文字でもいいですか？
HTML5では大文字・小文字どちらでも動作しますが、<HTML>より<html>のように小文字を使うのが現在の標準です。
Q. 終了タグが必要ないタグはどれですか？
<br>・<hr>・<img>・<input>・<meta>・<link>などは終了タグが不要な「空要素（void element）」です。
Q. classとidの違いは何ですか？
classは複数の要素に同じ名前を付けられます（例：カード一覧の全カードにclass="card"）。idは1ページ内で1つの要素にしか使えません（例：ページ内アンカーリンクの目的地）。
