セマンティックHTMLでマークアップを書きたい

セマンティックHTMLとは、要素の目的や役割に応じてHTMLのタグを使い分けることを言います。

ただ見た目を整えるだけなら全て<div>で作っても良いですが、見出しや文章の区切りなど、ドキュメントの構成を正しく伝えるためにはHTMLのセマンティック要素を使う必要があります。

例えば、最上位の見出しは<h1>、ナビゲーションは<nav>、文章のセクションは<section>で表すなどです。

セマンティック要素はおよそ100もあるようですが、その中でもずっと使い方が曖昧だったセクショニング・コンテンツと呼ばれる次の4つの要素についてまとめたいと思います。

section
article
aside
nav

そもそもなぜセマンティックHTMLで書く必要があるのか

セクショニング・コンテンツの使い方の説明の前に、そもそもセマンティックHTMLがなぜ重要かを、以下の3つの観点から紹介します。

SEO対策
Webアクセシビリティ
コードの保守性

1. SEO対策

検索エンジンがWebサイトを探索する際、HTMLタグを参考にします。

セマンティックHTMLで構造的に正しいマークアップがされていると、クローラーがそのサイトを理解しやすくなり、結果的に検索順位の向上につながります。

2. Webアクセシビリティ

目の不自由なユーザーがWebサイトを操作する際、スクリーンリーダーと呼ばれる読み上げソフトを利用します。

適切なマークアップは、それらのユーザーが必要なコンテンツにアクセスするサポートをしてくれます。

3. コードの保守性

Webサイトはリリース後に何度も修正や更新が行われます。

その際、セマンティックHTMLでマークアップしていると、コードを見ただけで「この部分はどんな役割を表現しているのか」がすぐに理解でき、開発スピードが上がります。

developer.mozilla.org

セクショニング・コンテンツの役割と使い方

ここからは、4つのセクショニング・コンテンツについて詳細をまとめます。

以下の書籍を参考にしています。セクショニング・コンテンツ以外のHTMLタグへの理解も深まるのでおすすめです。

武器になるHTML - 柴田宏仙

1. section

ページの章や節、項など自立したセクションを表します。

また<h1>〜<h6>でマークアップした階層を、より明確にするために使われます。

そのため、<section>には1つ以上の見出しタグが必要です。

<section>
    <h2>旅行先を選ぶ</h2>
    <p>目的地をお選びください。</p>

    <section>
      <h3>アジア</h3>
      <p>...</p>

      <section>
        <h4>東南アジア</h4>
        <p>...</p>
      </section>

      <section>
        <h4>南アジア</h4>
        <p>...</p>
      </section>
    </section>

    <section>
      <h3>ヨーロッパ</h3>
      ... 省略
    </section>
  </section>

2. article

マークアップした範囲を他から切り離しても、独立したコンテンツとして成り立つ場合に使います。

ブログ記事やニュース記事、ユーザーのコメントなど、個別に配信や再利用することを意図したコンテンツです。

<article>
    <h2>行ってよかった旅行先ベスト3</h2>
    <p><time datetime="2023-11-21">2023.11.21</time></p>

    <p>過去当社を利用されたことのあるお客様50名に聞いた、行ってよかった国・地域を紹介します。</p>
        ...省略

    <p>この記事を書いた人：xx支店店長</p>
</article>

<article>を入れ子にする場合、内側の<article>は外側と関連するコンテンツになります（記事に対するコメントなど）。

<article>
    <h2>行ってよかった旅行先ベスト3</h2>
    <p><time datetime="2023-11-21">2023.11.21</time></p>

    <p>過去当社を利用されたことのあるお客様50名に聞いた、行ってよかった国・地域を紹介します。</p>
        ...省略

    <p>この記事を書いた人：xx支店店長</p>

    <section>
      <h3>コメント</h3>
      <article>
        <h4>タイはおすすめ</h4>
        <p>投稿者:　Aya</p>
        <p><time datetime="2023-11-22 12:00">20分前</time></p>
        <p>この記事を読んでタイに行ってきました！</p>
      </article>
    </section>
  </article>

個人的に<section>と<article>の使い分けがややこしいと感じましたが、次のような基準で判断すると良いそうです。

section：サイトの話題を構成する一部
article：ブログやSNSで投稿した場合、それだけで1つのコンテンツとして成り立つ

Webサイトによくある「About（〇〇について）」「Contact（お問い合せ）」「Feature（特集）」など、ページを構成する1要素は<section>、アーカイブの1記事などは<article>を使うと良さそうです。

3. aside

サイドバーなど、メイン要素から切り離せる補足情報や余談、広告などに使います。

4. nav

グローバルナビゲーション、パンくずリスト、目次などに利用します。

<nav>は複数指定可能ですが、主要なナビゲーション1つのみに<nav>を使うことが推奨されています。

なぜなら、<nav>はスクリーンリーダーでナビゲーションのランドマークと読み上げられ、ユーザーのページ移動の目印となります。

<nav>が複数あると区別がつきにくく、ユーザーの混乱を招く可能性があるからです。

そのため、フッターによくある利用規約やプライバシーポリシーなどは<nav>で囲む必要はありません。

以上、セマンティックHTMLのざっくりとしたまとめと、セクショニング・コンテンツの使い方の紹介でした。

私もまだまだ正しいマークアップができていないので（特にWebアクセシビリティの理解はほぼないです）、これからも学習を続けたいと思います！

プログラミングめもめも

プログラミングの学習メモです