セマンティックタグとは
セマンティックタグとはウェブページの要素をその意味や役割に基づいて記述する、HTML5で追加されたタグです。特に見た目を変化させることはありませんが、アクセシビリティの向上やSEOの改善、開発効率と保守性の向上に役立ちます。
セマンティックタグには以下のようなものがあります。
| タグ | 解説 |
| header | ヘッダー サイトの上段部分で、ナビゲーションやロゴが含まれる |
| nav | ナビゲーションメニュー サイト内のリンクをまとめる |
| main | メイン部分 サイドバーやフッターを除いた中心部分 |
| section | セクション 特定のテーマや内容に関連するグループ化に使用される |
| article | 独立したコンテンツ ブログの記事、ニュース、フォーラムの投稿など個別の情報単位に使用される |
| aside | サイドバーや補足情報 メインコンテンツに関係ない内容に使用される |
| footer | フッター サイトの下段部分で著作権情報やサイトマップ、連絡先などが含まれる |
| figure | 画像や図表などを含むコンテンツグループ 説明文としてfigcaptionを使用可能 |
| time | 日時や時間を示す |
セマンティックタグを使用することでHTMLコードが整理されます。例えば、以下のようにdivタグというタグを使用してコンテンツをグループ化するよりもセマンティックタグを使用したほうがコードがスリムになり、ブラウザも解釈しやすくなります。
<div class="header">
<h1>タイトル</h1>
</div>
<div class="main-content">
<p>コンテンツ</p>
</div>
<div class="footer">
<p>フッター内容</p>
</div><header>
<h1>タイトル</h1>
</header>
<main>
<p>コンテンツ</p>
</main>
<footer>
<p>フッター内容</p>
</footer>このようにセマンティックタグは、適切に使用することで可読性を上げ、SEOなどでも有利になるタグです。
今回はセマンティックタグについて解説しました。セマンティックタグはHTML5で追加された新しいタグです。必要に応じて使うことでより良いWebページを作成できます。