1. はじめに｜タグの意味を“見た目”で決めていませんか？
HTMLを書くとき、つい「見た目」に頼ってタグを選んでしまうことはありませんか？
divで何でも囲ってしまうh2を大きくしたいだけで使っているfigureやpictureって結局何？
こういった悩みは、タグの意味を理解していないことが原因で起こります。
この記事では、HTMLタグの意味・用途・使用例を表形式で一覧化し、フロントエンド開発に役立つタグを中心に整理しました。
記事のテンプレートやデザインルールを整えるためにも、タグの正しい意味と使い方を見直してみましょう。
2. HTMLタグとは？｜構造と意味をマークアップする要素
HTML（HyperText Markup Language）は、Webページの構造と意味を示すためのマークアップ言語です。
タグの役割は大きく分けて3つ：
- ページの構造を示す（例：
<main>,<section>,<header>） - コンテンツの種類を示す（例：
<p>,<img>,<a>） - ブラウザや検索エンジンに「これは何か」を伝える
タグを正しく使うことで、次のようなメリットがあります：
- 検索エンジンに構造を正しく理解してもらえる（SEO）
- スクリーンリーダーなどの支援技術に対応できる（アクセシビリティ）
- CSSやJavaScriptでの制御がしやすくなる（保守性・再利用性）
3. HTMLタグ一覧｜フロントエンド向け使用例付き（表）
以下は、HTML5以降を中心に、フロントエンド実装でよく使うタグを網羅した一覧表です。
- タグ：実際に使うHTMLタグ名
- 意味・用途：何を表すタグか
- 使用例：コードでの具体的な使い方
詳細はMDNで確認ください。※随時更新
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<picture> | 複数画像ソースに対応した画像表示 | <picture><source srcset="image.webp" type="image/webp"><img src="image.jpg" alt="代替テキスト"></picture> |
<source> | picture, audio, video内のメディア指定 | <source src="video.mp4" type="video/mp4"> |
<img> | 画像の表示 | <img src="photo.jpg" alt="写真の説明"> |
<figure> | 画像・図・コードなどのキャプション付き表示 | <figure><img src="img.png"><figcaption>説明</figcaption></figure> |
<figcaption> | figureタグ内で図表などの説明を記述 | <figcaption>図1：デザイン構成</figcaption> |
<video> | 動画の埋め込み | <video controls src="movie.mp4"></video> |
<audio> | 音声の埋め込み | <audio controls src="audio.mp3"></audio> |
<canvas> | JavaScriptを使った描画領域 | <canvas id="myCanvas" width="300" height="150"></canvas> |
<svg> | ベクター形式の図形描画 | <svg><circle cx="50" cy="50" r="40" /></svg> |
<iframe> | 別ページやYouTubeなどの埋め込み | <iframe src="https://example.com"></iframe> |
<dialog> | モーダルダイアログの実装（JS連携） | <dialog open>こんにちは</dialog> |
<details> | 折りたたみ可能な内容ブロック | <details><summary>もっと見る</summary>詳細内容</details> |
<summary> | detailsの見出しに使う | <summary>クリックして展開</summary> |
<progress> | 進捗バー（数値進捗を表示） | <progress value="70" max="100">70%</progress> |
<meter> | 計測値や評価の可視化 | <meter value="0.7">70%</meter> |
<template> | JSで展開するHTMLテンプレート | <template><p>テンプレート内容</p></template> |
<slot> | Web Components内でコンテンツを受け取る | <slot></slot> |
<main> | ページの主なコンテンツ | <main>...</main> |
<section> | 意味のある区切りや章 | <section><h2>概要</h2></section> |
<article> | 独立して成り立つ情報コンテンツ | <article><h2>ブログ記事</h2></article> |
<nav> | ナビゲーション領域 | <nav><ul><li><a href="#">リンク</a></li></ul></nav> |
<header> | ヘッダー部分 | <header>ロゴ・メニュー</header> |
<footer> | フッター部分 | <footer>© 2025</footer> |
4. よくあるタグ選びのミスと対策
| 誤用例 | よくあるNG | 正しい使い方 |
|---|---|---|
<div class="header"> | ヘッダーなのにdiv | → <header>を使う |
<div class="main"> | ページの主部をdiv | → <main>を使う |
<br><br> | 空白調整に改行連打 | → CSSでmargin/padding調整 |
意味のあるタグを使うことは、HTML設計の基本です。
5. おわりに｜HTMLタグの理解は“綺麗な設計”への第一歩
HTMLタグを正しく理解して使うことは、Webページ設計の土台づくりにつながります。
タグの使い方を見直すことで、SEOやアクセシビリティも改善され、CSS設計やJS制御のしやすさにも直結します。
CodeQuest.workでは今後も「コピペできるUI実装」や「構造に強いコーディングの基礎」を発信していきますので、ブックマークやSNSフォローをお忘れなく！