HTMLのグループ分けとは？
HTMLにおけるグループ分けとは、ページ構造に意味を持たせる囲い構造のことです。
ナビゲーションメニューや本文、関連記事の一覧など、1つのかたまりとしてタグを囲みグループ化していきます。
そうすることで、SEOの最適化やアクセシビリティの向上を目指すことが出来ます。
グループ分けの種類
役割にあわせてグループ分けは存在します。
ヘッダー用やナビゲーション用など役割別に載せています。
header
headerは、ページ上部（導入部分や見出しエリア）にある要素を囲みます。主にページタイトルやロゴ画像やナビゲーション部分が該当します。
<header>
<h1>サイト名</h1>
<p>サイト説明</p>
</header>
ポイント
- HTML構文の上にあるからheaderではありません
- この後に載せる「article」や「section」内でも使用可能
nav
navは、メインのナビゲーションメニューの要素を囲みます。先ほどのheaderタグの中に含まれることが多くあります。
<nav>
<ul>
<li><a href=”/”>ホーム</a></li>
<li><a href=”/about>会社概要</a></li>
</ul>
</nav>
ポイント
- 主要なリンク集合にのみ使用
- すべてのリンクをnavに入れてはいけない
aricle
articleは、ページ内の記事となる部分や単体で完結するコンテンツ、再利用・独立可能な内容に使用されます。ニュースサイトやブログ記事、商品情報などが使用例です。
<article>
<h2>見出し</h2>
<p>説明</p>
</article>
ポイント
- 単体で完結できるコンテンツ
- 中身にheader / footerを記述可能
section
sectionは、意味のあるグループをまとめる際に使用します。基本は見出しとセットです。
articleとは異なり、その囲んだ部分だけを見ても情報は完結しません。
<section>
<h2>見出し</h2>
<ul>
<li><a href=”#”>中身①</a></li>
<li><a href=”#”>中身②</a></li>
</ul>
<section>
ポイント
- 必ず見出しを含める
- 意味もなく囲むのはNG
aside
asideは、本文ではない補足・関連情報を囲みます。例として、サイドバーや広告、プロフィールなどに使用することが出来ます。
<aside>
<h3>見出し</h3>
<p>説明</p>
</aside>
ポイント
- mainの内側、外側どちらでも記述可能
- articleの中にも記述可能
main
mainは、そのページの主役コンテンツ全体の要素を囲みます。様々なグループ要素が含まれている為、検索エンジンが最重要視しています。
<main>
<article>
<h2>見出し</h2>
<p>説明</a>
</article>
<section>
<h2>見出し</h2>
<ul>
<li><a href=”#”>中身①</a></li>
<li><a href=”#”>中身②</a></li>
</ul>
</section>
</main>
ポイント
- 1ページに1回のみ記述
- header / footer / nav / asideの中に入れない
footer
footerは、ページ下部にある締め・補足情報の部分を囲みます。コピーライトやSNSリンクなどを含む場合が多いです。
<footer>
<ul>
<li><a href=”#”>SNSリンク</a></li>
</ul>
<p>Copyright 2026 hyouchan</p>
</footer>
ポイント
- article / section内でも使用可能
div
divは、意味を持たないタグです。これまでは何かしらの役割がありグループとして囲んでいました。しかし、divは「どの用途にも該当しない」、「とりあえずデザインの為にグループにしておきたい」等、ひとまとめにするだけに使用出来る内容となります。
<div>
<img src=”photo.jpg” alt=”意味を持たない画像”>
<p>説明</p>
</div>
ポイント
- 意味を持たないレイアウト目的時に使用
- CSSやJavascriptの制御時に使用
コメント