「HTMLタグって種類が多すぎて覚えられない…」
「どのタグをいつ使えばいいのか分からない」
「効率的にHTMLタグを理解する方法はないの？」
ホームページを作るときに必ず使うHTML（HyperText Markup Language）。その中核となるのがタグという仕組みです。しかし、HTMLには100種類以上のタグが存在し、初心者にとって すべてを覚えるのは非常に困難に感じられます。
でも大丈夫です！実際のWeb制作で頻繁に使われるタグは限られており、それらを用途別にグループ分けして理解すれば、効率的にマスターできます。
この記事では、よく使うHTMLタグの種類を5つのカテゴリに分けて、わかりやすく解説します。
HTMLタグの基本概念
タグとは何か
マークアップの仕組み
HTMLタグは、コンテンツに意味や構造を与えるための「印」のような役割を果たします。文書の各部分が「見出し」なのか「段落」なのか「リンク」なのかを、コンピューターや検索エンジンに教える重要な仕組みです。
<h1>これは見出しです</h1>
<p>これは段落の文章です。</p>
<a href="example.com">これはリンクです</a>
タグの構造
多くのHTMLタグは、開始タグと終了タグのペアで構成されます：
<タグ名>内容</タグ名>
<タグ名 属性="値">内容</タグ名>
なぜ分類が重要なのか
学習効率の向上
HTMLタグを用途別に分類することで、以下のメリットがあります：
- 覚えやすい: 関連するタグをまとめて学習
- 選びやすい: 目的に応じて適切なタグを素早く特定
- 理解しやすい: タグの役割と使い場面が明確
実用性の向上
分類を理解することで、実際のWebページ制作時に：
- 適切な HTML構造を設計できる
- SEO（検索エンジン最適化）に有効なマークアップができる
- アクセシビリティ（利用しやすさ）を考慮したページが作れる
HTMLタグの5つの種類
HTMLタグは用途によって、大きく以下の5つに分類できます：
1. 文書構造タグ
ページの骨組みや区画を作るタグ群
2. テキスト関連タグ
文章の見出し、段落、強調などを表現するタグ群
3. メディア・リンクタグ
画像、動画、音声、リンクなどを埋め込むタグ群
4. リスト・表組みタグ
箇条書きや表を作成するタグ群
5. フォーム関連タグ
入力フォームやボタンを作成するタグ群
それぞれの詳細を見ていきましょう。
1. 文書構造タグ
基本的な文書構造
文書構造タグは、HTMLページ全体の骨組みを作る最も基本的なタグ群です。
必須の構造タグ
| タグ名 | 用途 | 説明 |
|---|---|---|
<html> | HTML文書全体 | すべての内容を囲む最上位要素 |
<head> | メタ情報セクション | ページの設定や情報を記述 |
<body> | 表示コンテンツ | 実際にブラウザに表示される内容 |
基本構造の例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<p>ここに表示される内容を書きます</p>
</body>
</html>
セマンティック（意味的）構造タグ
HTML5で導入された、意味的に明確な構造を表現するタグ群です。
レイアウト用構造タグ
| タグ名 | 用途 | 使用場面 |
|---|---|---|
<header> | ヘッダー部分 | ページやセクションの冒頭 |
<nav> | ナビゲーション | メニューや目次 |
<main> | メインコンテンツ | ページの主要内容 |
<section> | セクション | 章や節の区切り |
<article> | 独立した記事 | ブログ記事、ニュース等 |
<aside> | サイドコンテンツ | サイドバー、関連情報 |
<footer> | フッター部分 | ページやセクションの末尾 |
実用的な構造例
<body>
<header>
<h1>サイトのタイトル</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>記事のタイトル</h2>
<time datetime="2024-01-15">2024年1月15日</time>
</header>
<section>
<h3>第1章：はじめに</h3>
<p>記事の内容...</p>
</section>
<section>
<h3>第2章：詳細解説</h3>
<p>詳細な説明...</p>
</section>
</article>
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="/article1">関連記事1</a></li>
<li><a href="/article2">関連記事2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 私の会社. All rights reserved.</p>
</footer>
</body>
汎用コンテナタグ
divとspanの使い分け
| タグ名 | 特徴 | 用途 |
|---|---|---|
<div> | ブロックレベル要素 | レイアウトの区切り、グループ化 |
<span> | インライン要素 | 文章の一部を装飾、特定部分の意味付け |
使用例
<!-- div: ブロックレベル（改行される） -->
<div class="card">
<div class="card-header">
<h3>カードのタイトル</h3>
</div>
<div class="card-body">
<p>カードの内容</p>
</div>
</div>
<!-- span: インライン（改行されない） -->
<p>この文章の<span class="highlight">この部分だけ</span>ハイライトします。</p>
<p>価格は<span class="price">1,980円</span>です。</p>
2. テキスト関連タグ
見出しタグ
見出し階層の重要性
見出しタグ（h1-h6）は、文書の階層構造を表現する重要な要素です。SEOやアクセシビリティの観点からも正しい使い方が求められます。
| タグ名 | 重要度 | 使用場面 |
|---|---|---|
<h1> | 最重要 | ページのメインタイトル（1ページに1つ） |
<h2> | 大見出し | 主要なセクションの見出し |
<h3> | 中見出し | サブセクションの見出し |
<h4> | 小見出し | 詳細項目の見出し |
<h5> | より小さい見出し | 細分化された項目 |
<h6> | 最小見出し | 最も詳細なレベル |
正しい見出し構造の例
<h1>HTMLガイド完全版</h1>
<h2>HTMLの基礎知識</h2>
<h3>HTMLとは何か</h3>
<h3>HTMLの歴史</h3>
<h2>HTMLタグの種類</h2>
<h3>構造タグ</h3>
<h4>基本構造タグ</h4>
<h4>セマンティックタグ</h4>
<h3>テキストタグ</h3>
<h4>見出しタグ</h4>
<h4>段落タグ</h4>
段落・改行タグ
基本的なテキスト構造
| タグ名 | 用途 | 特徴 |
|---|---|---|
<p> | 段落 | 関連する文章をまとめる |
<br> | 改行 | 強制的な改行（段落内） |
<hr> | 水平線 | セクションの区切り |
使用例
<p>これは最初の段落です。関連する内容をまとめて一つの段落として記述します。</p>
<p>これは二番目の段落です。<br>
段落内で改行したい場合はbrタグを使用します。<br>
ただし、多用は避けましょう。</p>
<hr>
<p>水平線で区切った後の新しいセクションです。</p>
テキスト装飾・強調タグ
意味的な強調
| タグ名 | 意味 | 表示 | 使用場面 |
|---|---|---|---|
<strong> | 重要性の強調 | 太字 | 重要な情報、警告 |
<em> | 語調の強調 | 斜体 | 感情的な強調、イントネーション |
<mark> | ハイライト | 黄色背景 | 検索結果のマーキング |
<small> | 付帯情報 | 小さい文字 | 注釈、免責事項 |
引用・コード関連
| タグ名 | 用途 | 使用場面 |
|---|---|---|
<blockquote> | 長い引用 | 文献からの引用 |
<q> | 短い引用 | 文章中の引用 |
<cite> | 引用元 | 作品名、人名 |
<code> | インラインコード | プログラムコード |
<pre> | 整形済みテキスト | コードブロック |
実用的な使用例
<!-- 強調の使い分け -->
<p>この商品は<strong>期間限定</strong>で販売中です。</p>
<p>私は<em>本当に</em>この映画が好きです。</p>
<p><mark>重要</mark>な部分をハイライトしました。</p>
<p><small>※価格は税込み表示です</small></p>
<!-- 引用の例 -->
<blockquote cite="https://example.com">
<p>プログラミングは芸術と科学の融合である。</p>
<footer>— <cite>著名な開発者</cite></footer>
</blockquote>
<p>彼は<q>明日必ず来ます</q>と約束しました。</p>
<!-- コードの例 -->
<p>JavaScriptで変数を宣言するには<code>let name = "太郎";</code>と書きます。</p>
<pre><code>
function greet(name) {
return `Hello, ${name}!`;
}
</code></pre>
3. メディア・リンクタグ
リンクタグ（<a>）
基本的なリンク種類
リンクは Webの最も重要な機能の一つです。様々な種類のリンクを適切に使い分けることが大切です。
| リンク種類 | 記述例 | 用途 |
|---|---|---|
| 外部サイト | <a href="https://example.com"> | 他のWebサイトへ |
| 内部ページ | <a href="/about.html"> | 同じサイト内のページ |
| アンカー | <a href="#section1"> | 同じページ内の特定箇所 |
| メール | <a href="mailto:test@example.com"> | メールアプリを起動 |
| 電話 | <a href="tel:03-1234-5678"> | 電話アプリを起動 |
リンクの属性
| 属性 | 用途 | 例 |
|---|---|---|
href | リンク先URL | href="https://example.com" |
target | 開き方 | target="_blank"（新しいタブ） |
rel | 関係性 | rel="noopener"（セキュリティ） |
download | ダウンロード | download="filename.pdf" |
title | ツールチップ | title="詳細情報" |
実践的なリンク例
<!-- 基本的なリンク -->
<a href="https://www.google.com">Googleで検索</a>
<!-- 新しいタブで開く外部リンク -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
外部サイト（新しいタブ）
</a>
<!-- ページ内リンク -->
<a href="#contact-section">お問い合わせセクションへ</a>
<!-- メール・電話リンク -->
<a href="mailto:info@example.com?subject=お問い合わせ">メールで連絡</a>
<a href="tel:03-1234-5678">電話をかける</a>
<!-- ファイルダウンロード -->
<a href="/files/brochure.pdf" download="会社案内.pdf">
パンフレットをダウンロード
</a>
画像タグ（<img>）
必須属性と推奨属性
| 属性 | 必須 | 用途 | 例 |
|---|---|---|---|
src | ○ | 画像ファイルのパス | src="photo.jpg" |
alt | ○ | 代替テキスト | alt="商品の写真" |
width | – | 幅の指定 | width="300" |
height | – | 高さの指定 | height="200" |
loading | – | 読み込み方法 | loading="lazy" |
title | – | ツールチップ | title="画像の詳細説明" |
画像の使用例
<!-- 基本的な画像 -->
<img src="product.jpg" alt="新商品のスマートフォン">
<!-- サイズ指定付き画像 -->
<img src="logo.png" alt="会社ロゴ" width="200" height="50">
<!-- 遅延読み込み（パフォーマンス向上） -->
<img src="large-image.jpg" alt="高解像度写真" loading="lazy">
<!-- レスポンシブ画像 -->
<img src="responsive.jpg"
alt="レスポンシブ対応画像"
style="max-width: 100%; height: auto;">
レスポンシブ画像の高度な例
<picture>
<source media="(max-width: 768px)" srcset="mobile.jpg">
<source media="(max-width: 1024px)" srcset="tablet.jpg">
<img src="desktop.jpg" alt="デバイス別最適化画像">
</picture>
動画・音声タグ
動画埋め込み（<video>）
<video controls width="640" height="480">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<p>お使いのブラウザは動画再生に対応していません。</p>
</video>
<!-- 自動再生（注意：多くのブラウザで制限あり） -->
<video autoplay muted loop>
<source src="background.mp4" type="video/mp4">
</video>
音声埋め込み（<audio>）
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
<p>お使いのブラウザは音声再生に対応していません。</p>
</audio>
外部動画の埋め込み
<!-- YouTube動画の埋め込み -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
4. リスト・表組みタグ
リスト（箇条書き）タグ
順序なしリスト（<ul>）
点や記号で項目を表示するリストです。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
順序付きリスト（<ol>）
番号付きで項目を表示するリストです。
<ol>
<li>最初のステップ</li>
<li>次のステップ</li>
<li>最後のステップ</li>
</ol>
入れ子リストの例
<ul>
<li>フルーツ
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
</li>
<li>野菜
<ul>
<li>にんじん</li>
<li>ブロッコリー</li>
<li>トマト</li>
</ul>
</li>
</ul>
番号の種類を指定
<!-- ローマ数字 -->
<ol type="I">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>
<!-- アルファベット -->
<ol type="A">
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
</ol>
<!-- 開始番号を指定 -->
<ol start="5">
<li>5番目の項目</li>
<li>6番目の項目</li>
<li>7番目の項目</li>
</ol>
定義リスト（<dl>）
用語とその説明をペアで表示する特殊なリストです。
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Languageの略。Webページの構造を定義する言語。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheetsの略。Webページの見た目を装飾する言語。</dd>
<dt>JavaScript</dt>
<dd>Webページに動的な機能を追加するプログラミング言語。</dd>
</dl>
表組み（テーブル）タグ
基本的なテーブル構造
| タグ名 | 用途 | 説明 |
|---|---|---|
<table> | 表全体 | テーブルの外枠 |
<caption> | 表のタイトル | テーブルの説明 |
<thead> | ヘッダー部分 | 見出し行のグループ |
<tbody> | ボディ部分 | データ行のグループ |
<tfoot> | フッター部分 | 合計行など |
<tr> | 行 | テーブルの1行 |
<th> | ヘッダーセル | 見出しセル（太字） |
<td> | データセル | 通常のデータセル |
実用的なテーブル例
<table>
<caption>2024年第1四半期売上実績</caption>
<thead>
<tr>
<th>月</th>
<th>売上（万円）</th>
<th>前年比</th>
<th>達成率</th>
</tr>
</thead>
<tbody>
<tr>
<td>1月</td>
<td>1,200</td>
<td>+15%</td>
<td>105%</td>
</tr>
<tr>
<td>2月</td>
<td>1,350</td>
<td>+8%</td>
<td>98%</td>
</tr>
<tr>
<td>3月</td>
<td>1,500</td>
<td>+22%</td>
<td>112%</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>合計</th>
<td>4,050</td>
<td>+15%</td>
<td>105%</td>
</tr>
</tfoot>
</table>
セルの結合
<table>
<tr>
<th rowspan="2">商品カテゴリ</th>
<th colspan="2">2024年売上</th>
</tr>
<tr>
<th>上半期</th>
<th>下半期</th>
</tr>
<tr>
<td>電子機器</td>
<td>500万円</td>
<td>600万円</td>
</tr>
<tr>
<td>書籍</td>
<td>200万円</td>
<td>250万円</td>
</tr>
</table>
5. フォーム関連タグ
基本的なフォーム構造
フォームは、ユーザーからの入力を受け取るための重要な機能です。
フォームの全体構造
<form action="/submit" method="post">
<fieldset>
<legend>お問い合わせフォーム</legend>
<!-- フォーム要素がここに入る -->
<button type="submit">送信</button>
</fieldset>
</form>
入力タイプ別タグ
テキスト入力系
| タイプ | 用途 | 例 |
|---|---|---|
text | 一般的なテキスト | <input type="text" name="name"> |
email | メールアドレス | <input type="email" name="email"> |
password | パスワード | <input type="password" name="pass"> |
tel | 電話番号 | <input type="tel" name="phone"> |
url | URL | <input type="url" name="website"> |
search | 検索 | <input type="search" name="query"> |
数値・日付系
<!-- 数値入力 -->
<input type="number" name="age" min="0" max="120" step="1">
<!-- 日付入力 -->
<input type="date" name="birthday">
<!-- 時刻入力 -->
<input type="time" name="appointment">
<!-- 日時入力 -->
<input type="datetime-local" name="event-time">
<!-- 範囲選択（スライダー） -->
<input type="range" name="volume" min="0" max="100" value="50">
選択系入力
<!-- チェックボックス -->
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">メルマガを受け取る</label>
<!-- ラジオボタン -->
<fieldset>
<legend>性別</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">その他</label>
</fieldset>
<!-- セレクトボックス -->
<label for="prefecture">都道府県</label>
<select id="prefecture" name="prefecture">
<option value="">選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="kyoto">京都府</option>
</select>
高度なフォーム要素
複数行テキストエリア
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="詳細をお聞かせください"></textarea>
ファイル選択
<!-- 単一ファイル -->
<input type="file" name="resume" accept=".pdf,.doc,.docx">
<!-- 複数ファイル -->
<input type="file" name="photos" multiple accept="image/*">
<!-- 画像のみ -->
<input type="file" name="avatar" accept="image/jpeg,image/png">
その他の入力タイプ
<!-- 色選択 -->
<input type="color" name="theme-color" value="#ff0000">
<!-- 隠しフィールド -->
<input type="hidden" name="csrf_token" value="abc123xyz">
完全なフォーム例
<form action="/contact" method="post" enctype="multipart/form-data">
<fieldset>
<legend>お問い合わせフォーム</legend>
<!-- 基本情報 -->
<div class="form-group">
<label for="company">会社名</label>
<input type="text" id="company" name="company">
</div>
<div class="form-group">
<label for="name">お名前 <span class="required">*</span></label>
<input type="text" id="name" name="name" required>
<div class="form-group">
<label for="email">メールアドレス <span class="required">*</span></label>
<input type="email" id="email" name="email" required>
</div>
<div><div class="form-group">
<label for="phone">電話番号</label>
<input type="tel" id="phone" name="phone">
</div>
<!-- 選択項目 -->
<div class="form-group">
<label for="inquiry-type">お問い合わせ種類</label>
<select id="inquiry-type" name="inquiry-type" required>
<option value="">選択してください</option>
<option value="product">製品について</option>
<option value="service">サービスについて</option>
<option value="support">技術サポート</option>
<option value="other">その他</option>
</select>
</div>
<!-- 複数選択 -->
<fieldset>
<legend>興味のある分野（複数選択可）</legend>
<div class="checkbox-group">
<input type="checkbox" id="web" name="interests" value="web">
<label for="web">Webデザイン</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="app" name="interests" value="app">
<label for="app">アプリ開発</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="marketing" name="interests" value="marketing">
<label for="marketing">デジタルマーケティング</label>
</div>
</fieldset>
<!-- 長文入力 -->
<div class="form-group">
<label for="message">詳細メッセージ</label>
<textarea id="message" name="message" rows="6" cols="50" placeholder="具体的な内容をお聞かせください"></textarea>
</div>
<!-- ファイル添付 -->
<div class="form-group">
<label for="attachment">添付ファイル</label>
<input type="file" id="attachment" name="attachment" accept=".pdf,.doc,.docx,.txt">
</div>
<!-- 送信ボタン -->
<div class="form-buttons">
<button type="submit">送信</button>
<button type="reset">リセット</button>
</div>
</fieldset>
</form> フォーム制御とバリデーション
必須入力とバリデーション
<!-- 必須入力 -->
<input type="text" name="username" required>
<!-- 最小・最大文字数 -->
<input type="text" name="username" minlength="3" maxlength="20">
<!-- パターン指定（正規表現） -->
<input type="text" name="zipcode" pattern="[0-9]{3}-[0-9]{4}" title="郵便番号は123-4567の形式で入力してください">
<!-- 数値の範囲 -->
<input type="number" name="age" min="18" max="65">
プレースホルダーとヒント
<input type="email" name="email" placeholder="example@domain.com">
<input type="password" name="password" placeholder="8文字以上で入力してください">
実践的なタグの使い分け
用途別タグ選択ガイド
文章構造を作るとき
<!-- 記事やブログの基本構造 -->
<article>
<header>
<h1>記事タイトル</h1>
<time datetime="2024-01-15">2024年1月15日</time>
</header>
<section>
<h2>第1章</h2>
<p>内容...</p>
</section>
<section>
<h2>第2章</h2>
<p>内容...</p>
</section>
</article>
ナビゲーションを作るとき
<!-- メインナビゲーション -->
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/services">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
<!-- パンくずナビゲーション -->
<nav aria-label="パンくずナビゲーション">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/category">カテゴリ</a></li>
<li aria-current="page">現在のページ</li>
</ol>
</nav>
商品情報を表示するとき
<section class="product">
<h2>商品名</h2>
<img src="product.jpg" alt="商品画像">
<div class="product-info">
<p class="price"><strong>価格: 1,980円</strong></p>
<p class="description">商品の説明文...</p>
<dl class="specifications">
<dt>サイズ</dt>
<dd>幅10cm × 高さ15cm</dd>
<dt>重量</dt>
<dd>250g</dd>
<dt>材質</dt>
<dd>プラスチック</dd>
</dl>
</div>
</section>
アクセシビリティを考慮したタグ使用
適切なラベル付け
<!-- フォーム要素には必ずラベルを -->
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">
<!-- 画像には適切なalt属性を -->
<img src="chart.png" alt="2024年売上推移グラフ">
<!-- リンクには明確なテキストを -->
<a href="/report.pdf">年次報告書（PDF、2MB）</a>
セマンティックな構造
<!-- 意味のある構造を作る -->
<main>
<article>
<h1>記事タイトル</h1>
<p>記事の内容...</p>
</article>
<aside>
<h2>関連情報</h2>
<p>サイドバーの内容...</p>
</aside>
</main>
まとめ
HTMLタグを効果的に使うための5つのポイント
1. 適切な分類理解
- 文書構造タグ: ページの骨組みを作る
- テキスト関連タグ: 内容を適切にマークアップ
- メディア・リンクタグ: 画像や動画、リンクを配置
- リスト・表組みタグ: 情報を整理して表示
- フォーム関連タグ: ユーザー入力を受け付ける
2. セマンティックな使用
見た目だけでなく、意味を重視してタグを選択しましょう。
<!-- 良い例：意味が明確 -->
<article>
<h1>記事タイトル</h1>
<p>記事の内容</p>
</article>
<!-- 悪い例：意味が不明確 -->
<div>
<div style="font-size: 24px; font-weight: bold;">記事タイトル</div>
<div>記事の内容</div>
</div>
3. 階層構造の維持
見出しタグ（h1-h6）は順序を守って使用し、論理的な文書構造を作りましょう。
4. アクセシビリティの考慮
alt属性を適切に設定label要素でフォーム要素をラベル付け- 適切なコントラストと読みやすさを確保
5. パフォーマンスの最適化
- 画像に
loading="lazy"を使用 - 適切なファイル形式を選択
- 不要なタグの削除
コメント