サイト構造を表すセマンティックタグ
HTML5では、ページ内の役割を表すための「セマンティックタグ」が導入され、Webページの構造を明確にするために使われます。これにより、コードが読みやすくなるだけでなく、検索エンジンや支援技術（スクリーンリーダーなど）にとっても、ページの構造や意味が理解しやすくなります。以下に、代表的なセマンティックタグを解説します。
1. <header>
<header> タグは、ページやセクションのヘッダー（見出し部分）を表します。通常、ロゴ、ナビゲーションリンク、検索フォーム、見出しなどが含まれる部分です。ページ全体のヘッダーや、個々のセクション（例えば記事）にも使用できます。
サンプルコード
使用例
- ページ全体のヘッダー部分や、記事の先頭に配置し、見出しやナビゲーションを含めます。
2. <footer>
<footer> タグは、ページやセクションのフッター部分を表します。通常、著作権情報、著者情報、関連リンク、ページの最下部に表示する内容が含まれます。<header>と同様に、ページ全体のフッターや、個々のセクション（例えば記事）の末尾にも使用できます。
サンプルコード
使用例
- ページの最下部に配置し、著作権や補足情報を掲載します。
3. <nav>
<nav> タグは、ナビゲーションメニューを表すために使用します。主にページ内のリンクリスト（ヘッダーのナビゲーションバー、サイドメニュー、フッターリンク）に使われます。ページ内で複数の <nav> タグを使うことも可能です。
サンプルコード
使用例
- ページの主要なナビゲーションを表し、ユーザーが他のページやセクションに移動しやすくします。
4. <section>
<section> タグは、意味のあるセクションや区切りを表します。通常、関連する内容のグループを作り、見出し（<h1>～<h6>タグ）と一緒に使います。例えば、ニュース記事や製品リストなどのセクション分けに使います。
サンプルコード
使用例
- 内容を区切り、論理的なセクションごとに整理します。ページの構造が分かりやすくなります。
5. <article>
<article> タグは、ページ内で独立して再利用可能なコンテンツを表します。ブログ記事、ニュース記事、コメント、フォーラムの投稿など、独立性が高い内容に適しています。
サンプルコード
使用例
- 記事や投稿、コメントなど、それ自体で完結するコンテンツに使用します。
6. <aside>
<aside> タグは、メインコンテンツに関連する補足情報を提供するために使われます。たとえば、広告、リンクリスト、引用、注釈、サイドバーなどに使われます。
サンプルコード
使用例
- メインのコンテンツに直接関係しない情報（補足情報）やサイドバーに配置します。
7. <main>
<main> タグは、ページのメインコンテンツ部分を表します。ページで一度だけ使用するのが適切で、サイトの主要な内容を囲むのに使います。ナビゲーションバー、ヘッダー、フッター、サイドバーなどの補助部分を除いた、ページの中心となる内容を含めます。
サンプルコード
使用例
- ページ内で一度だけ使用し、ナビゲーションやフッター以外の主要な内容を含めます。
8. <figure> と <figcaption>
<figure> タグは、画像やイラスト、図表などのメディアを表します。通常、メインコンテンツと関連があり、独立しても意味が通じる内容です。<figcaption> は <figure> 内のメディアに説明を加えるタグです。
サンプルコード
使用例
- 画像や図表などにキャプションを付けて説明を加えます。
まとめ
これらのセマンティックタグを使うと、ページ構造が明確になり、読みやすく、検索エンジンにも認識されやすいHTMLを作成できます。
sectionは利用する際に構造がしっかりしていないといけない、article/figureは正しいコンテンツ意味の箇所に使わないといけないなど注意が必要です。
利用に不安がある場合はdivタグを使ってもかまいません。
