意味のあるタグを使おう！セマンティックHTMLの実践ガイド

セマンティックHTMLとは？

セマンティック（semantic）とは「意味のある」という意味です。HTMLにおけるセマンティックとは、タグが持つ本来の意味に沿ってコンテンツをマークアップすることを指します。

例：セマンティックな記述と非セマンティックな記述の違い

非セマンティックな例（divで構成）：

<div id="header">ヘッダー</div>
<div id="main">メインコンテンツ</div>
<div id="footer">フッター</div>

セマンティックな例：

<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>

このように、HTMLタグ自体に意味があることで、ブラウザや支援技術、検索エンジンがコンテンツをより正確に理解できるようになります。

よく使うセマンティック要素とその使い方

HTML5で導入された主なセマンティックタグを、具体例とともに紹介します。

<header>

ページ全体またはセクションのヘッダーに使用します。

<header>
    <h1>サイトタイトル</h1>
    <nav>...</nav>
</header>

<nav>

ナビゲーションリンクのグループに使用します。

<nav>
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社概要</a></li>
    </ul>
</nav>

<main>

そのページの主たるコンテンツを示します。1ページに1つのみ使用。

<main>
    <article>...</article>
</main>

<article>と<section>

• <article>：独立性のあるコンテンツ（例：ブログ記事）
• <section>：意味のあるまとまりを持つセクション

<article>
    <h2>記事タイトル</h2>
    <p>記事の本文...</p>
</article>

<section>
    <h2>お知らせ</h2>
    <ul>...</ul>
</section>

<aside>

補足情報を表示する際に使用します（サイドバーなど）。

<aside>
    <h2>関連記事</h2>
    <ul>...</ul>
</aside>

<footer>

ページやセクションのフッターに使用。

<footer>
    <p>© 2025 Your Company</p>
</footer>

セマンティックHTMLを使うメリット

セマンティックHTMLを正しく使うことで、以下のような利点があります。

SEO効果の向上

検索エンジンは構造を理解しやすくなり、適切に評価されやすくなります。特に<article>や<h1>～<h6>の使い方はSEOに直結します。

アクセシビリティの改善

スクリーンリーダーがタグの意味を理解しやすくなり、視覚に頼らずに情報を把握できるようになります。

保守性・可読性の向上

構造が明確になるため、複数人での開発や将来のメンテナンスがしやすくなります。

セマンティックHTMLを使う際の注意点

h1タグの使い方に注意

ページごとに<h1>は原則1つにしましょう。見た目だけで見出しを調整せず、意味に応じて<h2>～<h6>を使い分けます。

セクション要素のネストは適切に

例えば<section>内に<article>を入れる場合など、どの範囲の意味を持たせるのかを意識して構造化しましょう。

なんでもかんでもdivで囲まない

<div>の多用はセマンティックではありません。役割がある要素には、できるだけ意味のあるタグを使いましょう。

まとめ：意味のあるHTMLで、より良いWebをつくろう

セマンティックHTMLを意識することは、単なる「マークアップのきれいさ」ではなく、ユーザーと検索エンジンに優しいWebづくりの第一歩です。タグ1つの選び方で、アクセシビリティ・SEO・メンテナンス性が大きく変わることを理解し、実務でも積極的に取り入れていきましょう。