Web制作をしていると、こんな経験はありませんか？
- とりあえず
<div>を使う <section>と<article>の違いが曖昧<header>や<main>をなんとなく配置している- 見出しタグをデザイン目的で使ってしまう
HTMLは「見た目を作る言語」ではなく、意味（セマンティクス）を設計する言語です。
タグを正しく使い分けることで、SEO・アクセシビリティ・保守性が大きく改善します。
この記事では、HTMLタグの正しい使い分けを体系的に解説します。
初心者だけでなく、実務でHTMLを書く人が一度整理しておきたい内容です。
セマンティックHTMLとは？
まず基本から整理します。
セマンティックHTMLとは
HTMLタグに意味を持たせて文書構造を作る設計
のことです。
例えば次の2つ。
意味がないHTML
<div class="header"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="footer"></div>
セマンティックHTML
<header></header>
<nav></nav>
<main></main>
<footer></footer>
見た目は同じでも、意味は大きく違います。
検索エンジンやスクリーンリーダーは、
HTMLの意味構造を理解してページを解析します。
HTMLタグの分類
HTMLタグは大きく分けて次の4つに分類できます。
| 分類 | 役割 |
|---|---|
| セクショニング | ページ構造を作る |
| グルーピング | 要素をまとめる |
| テキスト | 文章を意味付け |
| インタラクティブ | 操作要素 |
ここから、それぞれ詳しく見ていきます。
① ページ構造を作るタグ
まず最も重要なタグです。
<header>
ページまたはセクションの導入部分。
<header>
<h1>サイト名</h1>
<nav>...</nav>
</header>
使いどころ：
- サイトヘッダー
- 記事ヘッダー
- セクションヘッダー
<main>
ページのメインコンテンツ。
<main>
コンテンツ
</main>
ポイント：
- ページに1つだけ
- ナビやフッターは含まない
<footer>
ページやセクションの締め。
<footer>
<p>Copyright</p>
</footer>
<nav>
ナビゲーション。
<nav>
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
② セクション系タグ
<section>
テーマごとの区切り。
<section>
<h2>サービス</h2>
<p>説明</p>
</section>
ポイント：
- 見出しが必要
- 文書の章を表す
<article>
独立したコンテンツ。
<article>
<h2>ブログ記事</h2>
<p>本文</p>
</article>
使いどころ：
- ブログ記事
- ニュース記事
- SNS投稿
- 商品カード
特徴：
単体で再利用できる
<aside>
補足情報。
<aside>
関連記事
</aside>
例：
- サイドバー
- 広告
- 関連記事
③ グルーピングタグ
<div>
意味を持たないコンテナ。
<div class="card">
<h3>タイトル</h3>
</div>
用途：
- レイアウト
- CSSフック
- JS操作
最後の手段として使う
<figure> と <figcaption>
画像や図の説明。
<figure>
<img src="image.jpg">
<figcaption>説明</figcaption>
</figure>
④ テキスト系タグ
見出しタグ
h1
h2
h3
h4
h5
h6
基本構造：
h1
├ h2
│ ├ h3
│ └ h3
└ h2
注意：
- 見た目目的で使わない
- 階層を飛ばさない
<p>
段落。
<p>文章</p>
<strong>
重要な強調。
<strong>重要</strong>
<em>
意味的強調。
<em>強調</em>
<mark>
ハイライト。
<mark>重要</mark>
⑤ リストタグ
<ul>
順不同リスト。
<ul>
<li>項目</li>
</ul>
<ol>
順序リスト。
<ol>
<li>手順</li>
</ol>
<dl>
定義リスト。
<dl>
<dt>HTML</dt>
<dd>マークアップ言語</dd>
</dl>
⑥ フォームタグ
<form>
フォーム全体。
<label>
入力ラベル。
<label for="name">名前</label>
<input id="name">
<button>
ボタン。
<button>送信</button>
よくあるタグの使い分け
| 迷うタグ | 判断 |
|---|---|
| section vs div | 意味があるならsection |
| article vs section | 独立コンテンツならarticle |
| strong vs b | 重要ならstrong |
| em vs i | 意味強調ならem |
実務テンプレ
基本ページ構造。
<header>
<nav></nav>
</header><main><section>
<h1>タイトル</h1>
</section><section>
<h2>内容</h2>
</section></main><footer>
</footer>
HTML設計の黄金ルール
① 見た目ではなく意味で考える
② sectionには見出しをつける
③ articleは独立コンテンツ
④ divは最後の手段
⑤ 見出し階層を守る
HTML設計チェックリスト
- mainは1つ？
- h1はページテーマ？
- 見出し階層が自然？
- sectionに見出しある？
- articleは独立している？
- navはナビだけ？
セマンティックタグ（ページ構造）
HTML5で追加された重要なタグです。
| タグ | 意味 |
|---|---|
header | ヘッダー |
nav | ナビゲーション |
main | メインコンテンツ |
section | セクション |
article | 独立コンテンツ |
aside | 補足情報 |
footer | フッター |
例：
<header></header>
<nav></nav>
<main></main>
<footer></footer>
グルーピングタグ
要素をまとめるタグです。
| タグ | 意味 |
|---|---|
div | 汎用コンテナ |
p | 段落 |
hr | 区切り線 |
pre | 整形済みテキスト |
blockquote | 引用 |
figure | 図 |
figcaption | 図の説明 |
例
<figure>
<img src="image.jpg">
<figcaption>画像説明</figcaption>
</figure>
見出しタグ
HTML文書の階層構造を作ります。
| タグ | 役割 |
|---|---|
h1 | ページタイトル |
h2 | 大見出し |
h3 | 中見出し |
h4 | 小見出し |
h5 | 補助見出し |
h6 | 最小見出し |
基本構造
h1
├ h2
│ ├ h3
│ └ h3
└ h2
テキストタグ
文章の意味を付けるタグ。
| タグ | 意味 |
|---|---|
strong | 重要 |
em | 強調 |
b | 太字 |
i | 斜体 |
mark | ハイライト |
small | 補足 |
del | 削除 |
ins | 追加 |
sub | 下付き |
sup | 上付き |
abbr | 略語 |
cite | 引用元 |
code | コード |
kbd | キーボード入力 |
samp | 出力例 |
var | 変数 |
span | インラインコンテナ |
例
<p>これは<mark>重要</mark>な文章です。</p>
リストタグ
項目リストを作るタグ。
| タグ | 意味 |
|---|---|
ul | 順不同リスト |
ol | 順序リスト |
li | リスト項目 |
dl | 定義リスト |
dt | 定義用語 |
dd | 説明 |
例
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
リンク・メディアタグ
外部コンテンツ関連。
| タグ | 意味 |
|---|---|
a | リンク |
img | 画像 |
picture | レスポンシブ画像 |
source | メディアソース |
audio | 音声 |
video | 動画 |
track | 字幕 |
iframe | 埋め込み |
例
<a href="#">リンク</a>
<img src="image.jpg">
テーブルタグ
表データ。
| タグ | 意味 |
|---|---|
table | 表 |
thead | ヘッダー |
tbody | 本体 |
tfoot | フッター |
tr | 行 |
th | 見出しセル |
td | データセル |
caption | 表タイトル |
colgroup | 列グループ |
col | 列 |
例
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
</table>
フォームタグ
ユーザー入力。
| タグ | 意味 |
|---|---|
form | フォーム |
label | ラベル |
input | 入力 |
textarea | テキスト |
select | 選択 |
option | 選択肢 |
button | ボタン |
fieldset | グループ |
legend | グループタイトル |
datalist | 入力候補 |
output | 結果表示 |
progress | 進行状況 |
meter | 値メーター |
インタラクティブタグ
ユーザー操作。
| タグ | 意味 |
|---|---|
details | 開閉 |
summary | タイトル |
dialog | ダイアログ |
例
<details>
<summary>クリック</summary>
<p>内容</p>
</details>
その他のHTMLタグ
| タグ | 役割 |
|---|---|
script | JavaScript |
style | CSS |
link | 外部CSS |
template | テンプレート |
canvas | 描画 |
svg | ベクター |
実務でよく使うタグランキング
Web制作でよく使うタグTOP20。
1 html
2 head
3 body
4 header
5 nav
6 main
7 section
8 article
9 div
10 p
11 h1〜h6
12 a
13 img
14 ul
15 li
16 figure
17 figcaption
18 form
19 input
20 button
まとめ
HTMLタグを正しく使うと：
- SEOが安定する
- アクセシビリティが向上する
- コードが読みやすい
- チーム開発が楽になる
- 将来の保守が簡単
HTMLは
「見た目」ではなく「意味」を設計する言語
です。
タグの使い分けを理解することで、
Web制作のレベルが一段上がります。
