HTML5 Semantic Elements再入門：SEOとアクセシビリティを意識したマークアップ

はじめに

HTML5で導入されたセマンティック要素は、ウェブページの構造を意味的に記述するための要素です。
header, nav, article, section, aside, footer
などが代表的なセマンティック要素として挙げられます。
これらの要素を適切に使うことで、SEO（検索エンジン最適化）とアクセシビリティの向上に大きく貢献します。
この記事では、セマンティック要素の基本から、SEOとアクセシビリティを意識したマークアップ方法までを解説します。

セマンティック要素とは？

セマンティック（semantic）とは「意味論的な」という意味です。
つまり、セマンティック要素とは、要素自体が持つ意味に基づいてウェブページの構造を記述する要素のことです。
従来のdivやspan要素は、汎用的なコンテナ要素であり、それ自体には意味を持ちません。
一方、セマンティック要素は、その要素が何を表しているのかを明確に示します。

例：

• header: ウェブサイトやセクションのヘッダー部分を表す
• nav: ナビゲーションメニューを表す
• article: 独立した記事やコンテンツを表す
• section: ウェブページのセクション（章や節）を表す
• aside: 主要コンテンツとは関連性が低い補足的なコンテンツを表す
• footer: ウェブサイトやセクションのフッター部分を表す

主要なセマンティック要素

ここでは、主要なセマンティック要素について、具体的な使用例と合わせて解説します。

HTML
<header>
    <h1><a href="/">ウェブサイトのタイトル</a></h1>
    <nav>
        <ul>
            <li><a href="/about">会社概要</a></li>
            <li><a href="/service">サービス</a></li>
            <li><a href="/contact">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

HTML
<nav>
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/news">ニュース</a></li>
        <li><a href="/blog">ブログ</a></li>
    </ul>
</nav>

HTML
<article>
    <header>
        <h2>ブログ記事のタイトル</h2>
        <p class="post-meta">投稿日：2023年12月20日 | 著者：山田太郎</p>
    </header>
    <section class="post-content">
        <p>ブログ記事の本文が入ります。</p>
        <!-- ... 中略 ... -->
    </section>
    <footer>
        <p class="post-categories">カテゴリ：<a href="/category/html">HTML</a></p>
        <p class="post-tags">タグ：<a href="/tag/semantic-elements">セマンティック要素</a>,<a href="/tag/html5">HTML5</a></p>
    </footer>
</article>

HTML
<section id="about-us">
    <h2>私たちについて</h2>
    <p>会社概要や事業内容などを記述します。</p>
</section>

<section id="service-list">
    <h2>サービス一覧</h2>
    <ul>
        <li>サービスA</li>
        <li>サービスB</li>
        <li>サービスC</li>
    </ul>
</section>

HTML
<aside>
    <h2>関連情報</h2>
    <ul>
        <li><a href="#">関連リンク1</a></li>
        <li><a href="#">関連リンク2</a></li>
    </ul>
</aside>

HTML
<footer>
    <small>© 2023 〇〇株式会社</small>
    <ul>
        <li><a href="/site-map">サイトマップ</a></li>
        <li><a href="/privacy-policy">プライバシーポリシー</a></li>
    </ul>
</footer>

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

セマンティック要素を適切に使うことで、主に以下のメリットが得られます。

1. SEO効果の向上

   検索エンジンは、セマンティック要素を解析してウェブページの構造を理解しやすくなります。
   これにより、コンテンツのテーマや重要度が正確に伝わり、検索順位の向上に繋がる可能性があります。

2. アクセシビリティの向上

   スクリーンリーダーなどの支援技術は、セマンティック要素に基づいてウェブページの構造をユーザーに伝えます。
   セマンティック要素を使うことで、視覚障碍者を含むすべてのユーザーにとって、コンテンツが理解しやすくなります。

3. コードの可読性と保守性の向上

   セマンティック要素を使うことで、HTMLコードが意味的に構造化され、コードの意図が明確になります。
   これにより、コードの可読性が向上し、メンテナンスやチーム開発が容易になります。

セマンティック要素を使う上での注意点

セマンティック要素は非常に便利ですが、使用する際には以下の点に注意しましょう。

• デザインのために無理に使わない

  セマンティック要素は、あくまでコンテンツの構造を意味的に記述するためのものです。
  デザイン上の理由だけで、本来の意味と異なる要素を使うのは避けましょう。
  デザインはCSSで調整するべきです。

• 非セマンティック要素 (div) との使い分け

  div要素は、セマンティック要素では表現できない汎用的なコンテナとして活用できます。
  例えば、レイアウトの調整や、JavaScriptで操作するためのグループ化などに使用します。
  すべてのdivをセマンティック要素に置き換える必要はありません。

• 適切な要素を選ぶ

  複数のセマンティック要素が候補となる場合、最も適切な要素を選ぶように心がけましょう。
  例えば、主要なコンテンツにはmain要素、独立した記事にはarticle要素、関連性の低い補足情報にはaside要素を使うなど、コンテンツの種類に応じて使い分けます。

まとめ

HTML5のセマンティック要素は、SEOとアクセシビリティを向上させるために非常に重要な要素です。
この記事で紹介した要素を理解し、適切にマークアップすることで、より多くのユーザーに優しいウェブサイトを構築することができます。
セマンティック要素を積極的に活用し、ウェブページの品質向上を目指しましょう。