セマンティックHTMLとは？
セマンティックHTML（意味論的HTML）とは、Webページの構造やコンテンツを意味的に正しく表現するために使用されるHTMLのマークアップ方法です。
わかりやすく言うと、レイアウトや見た目を重視してタグを使うのではなく、意味に注目してタグを利用しよう！というのがセマンティックHTMLの考え方です。
■HTML4.01からHTML5へのバージョンアップによる変更点
HTML4.01では、レイアウトに主に<div>を多用してデザインや見た目に重点を置いてマークアップが行われることが多く、コンテンツの意味が明確でない場合が多くありました。
HTML5からは、より検索エンジンにページ内容を正確に登録してもらうため、要素（タグ）の意味を考慮して適切なものを選び、Webページの構造とコンテンツを明確に表現することを推奨しています。
HTML4.01では<div>を使って枠を作っていた内容をHTMLではページの構造や内容の要素によって新しく追加されたタグ使い分けて使用するようにしましょう。
HTMLで追加されたセマンテックHTMLとしてのタグ
| タグ | 説明 |
|---|---|
| <header> | ページやセクションのヘッダーを示す。 |
| <nav> | ナビゲーションリンクを含むセクションを示す。 |
| <main> | ページの主要コンテンツ領域を示す。 |
| <article> | 独立して再利用可能なコンテンツ（ブログ記事、ニュース記事など）を示す。 |
| <section> | 関連するコンテンツのグループを示す。 |
| <aside> | ページのメインコンテンツに関連するが、直接的には属さない補足情報を示す。 |
| <footer> | ページやセクションのフッターを示す。 |
| <figure> | 図やイメージ、ビデオ、コードブロックなどの参照コンテンツを示す。 |
| <figcaption> | <figure>内のコンテンツに対するキャプションや説明を示す。 |
ページをレイアウトしながらコーディングしていくときどのタグを使用したら良いか考えながらコーディングするより、<div>〜</div>で素早くコーディングしといて、後から内容に合わせてタグを変更した方が早い場合があります。
<div>を使っても間違いではありませんが、検索エンジンに内容をきちんと伝えインデックスしてもらうならば最終的にサイトを公開する前にSEO的にもセマンテックHTMLを意識して修正した方が良いと思います。
- セマンティックHTML
要素（タグ）の意味を考慮して適切なものを選び、Webページの構造とコンテンツを明確に表現します。
- セマンティックではないHTML
主にデザインや見た目に重点を置いてマークアップが行われることが多く、コンテンツの意味が明確でない場合があります。
■サイトを公開する前にセマンティックHTMLを意識しましょう
- <div>と<span>の過剰な使用
セマンティックではないHTMLでは、ページの構造を表現するために<div>や<span>が多用されることがあります。これらのタグは意味を持たないため、ページの構造が不明瞭になりがちです。
■<div>を多用している例
<!-- 非推奨 -->
<div id="header">
<div id="navigation">
<!-- ナビゲーションリンク -->
</div>
</div>
<div id="content">
<div class="article">
<!-- 記事の内容 -->
</div>
<div class="sidebar">
<!-- サイドバーの内容 -->
</div>
</div>
<div id="footer">
<!-- フッターの内容 -->
</div>
<div id="header">
<div id="navigation">
<!-- ナビゲーションリンク -->
</div>
</div>
<div id="content">
<div class="article">
<!-- 記事の内容 -->
</div>
<div class="sidebar">
<!-- サイドバーの内容 -->
</div>
</div>
<div id="footer">
<!-- フッターの内容 -->
</div>
- <b>や<i>タグの使用
セマンティックではないHTMLでは、<b>や<i>タグが使われることがあります。これらのタグは、テキストの見た目を変更するだけで意味的な情報を持っていません。代わりに、<strong>や<em>タグを使って、テキストの重要性や強調を表現することが望ましいです。
<!-- 非推奨 -->
<p>このテキストは<b>重要</b>です。</p>
<p>このテキストは<i>強調</i>されています。</p>
<!-- 推奨 -->
<p>このテキストは<strong>重要</strong>です。</p>
<p>このテキストは<em>強調</em>されています。</p>
<p>このテキストは<b>重要</b>です。</p>
<p>このテキストは<i>強調</i>されています。</p>
<!-- 推奨 -->
<p>このテキストは<strong>重要</strong>です。</p>
<p>このテキストは<em>強調</em>されています。</p>
- テーブルをレイアウト目的で使用
セマンティックではないHTMLでは、テーブルタグ（<table>）がページのレイアウト目的で使われることがあります。しかし、テーブルはデータの表現に使用すべきであり、レイアウトのためにはCSSを使うべきです。
<!-- 非推奨 -->
<table>
<tr>
<td>
<!-- 左カラムの内容 -->
</td>
<td>
<!-- 右カラムの内容 -->
</td>
</tr>
</table>
<table>
<tr>
<td>
<!-- 左カラムの内容 -->
</td>
<td>
<!-- 右カラムの内容 -->
</td>
</tr>
</table>
セマンティックHTMLのメリット
セマンティックHTMLはWebページの構造と意味を明確に表現することで、アクセシビリティ、SEO、メンテナンス性を向上させるという点でメリットがあります。
セマンティックなHTMLを利用するメリット
- アクセシビリティ向上
セマンティックHTMLを使用すると、Webページの構造が明確になります。これにより、スクリーンリーダーや音声ブラウザなどの支援技術を使用しているユーザーが、ページのコンテンツにアクセスしやすくなります。 - 検索エンジン最適化（SEO）
セマンティックHTMLによって、検索エンジンはページの構造とコンテンツを正確に解析できます。これにより、検索結果のランキングにおいて適切な位置に表示される可能性が高まります。 - メンテナンス性向上
セマンティックHTMLは、コードの可読性が高まります。これにより、他の開発者がコードを理解しやすくなり、メンテナンスやデバッグが容易になります。
HTML4では、ページの構造を表現するために主に<div>や<span>が使われていましたが、これらは意味を持たないため、構造が不明瞭でアクセシビリティが低いという問題がありました。これを解決するために、HTML5では導入されたのがセマンティックHTML。
したがって、セマンティックHTMLのタグは主にHTML5から導入されたものが多く、それ以前のHTMLバージョンでは利用できないものがあるという点に注意しましょう。（ほとんどのサイトがHTML5になっている現在では、わざわざHTML4.01で作っているサイトをそそまま更新することはほとんどないと思いますが…）
