HTMLのセクション要素：＜section＞ ＜article＞ ＜aside＞ ＜nav＞の違いと使い方

HTML5の登場により、ウェブページの意味論的な構造化が進化しました。その中でも、セクション要素は、コンテンツの役割を明確に伝えるために重要です。本記事では、<section>, <article>, <aside>, <nav>の違いや具体的な使い方について解説します。

<section>：セクションの定義

<section>は、ページのテーマやトピックごとに内容を分ける際に使用されます。意味的に関連するコンテンツをグループ化するのが主な役割です。

使用例

<section>
  <h2>最新ニュース</h2>
  <p>ウェブ開発に関する最新情報をご紹介します。</p>
</section>

注意点

• 見出し（<h1>～<h6>）を含めて使用することが推奨されます。
• 汎用的すぎる場合は他の要素を検討する。

<article>：独立したコンテンツ

<article>は、独立した内容を表す要素です。ブログ記事、ニュース、フォーラム投稿など、単独で意味を成すコンテンツに適しています。

使用例

<article>
  <h2>ウェブデザインのトレンド</h2>
  <p>2024年のウェブデザインで注目すべきポイントをご紹介します。</p>
</article>

注意点

• コンテンツが他のページや場所に再利用されても意味が通じる場合に使用します。
• 親要素との文脈に注意して適切に選ぶ。

<aside>：補足的な情報

<aside>は、主なコンテンツに関連する補足情報を提供するための要素です。サイドバーや注釈などに使われます。

使用例

<aside>
  <h3>関連リンク</h3>
  <ul>
    <li><a href="#">HTMLの基本</a></li>
    <li><a href="#">CSS入門</a></li>
  </ul>
</aside>

注意点

• メインの内容と直接関連しない情報を含めるのが適切です。
• 主コンテンツとの視覚的な分離を意識します。

<nav>：ナビゲーション要素

<nav>は、ウェブサイトのナビゲーションリンクをグループ化するために使用されます。主に、メニューや目次などに適しています。

使用例

<nav>
  <ul>
    <li><a href="/home">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

注意点

• ナビゲーション以外のリンクには使用しないように注意します。
• ページ全体で一貫性のあるスタイルを適用する。

4つの要素の比較表

具体的な活用例

以下は、これらの要素を組み合わせたウェブページの一例です。

<main>
  <section>
    <h2>最新ニュース</h2>
    <article>
      <h3>HTML5の新機能</h3>
      <p>HTML5で導入された新しい要素について解説します。</p>
    </article>
    <article>
      <h3>CSSグリッドの活用法</h3>
      <p>グリッドレイアウトで効率的なデザインを実現しましょう。</p>
    </article>
  </section>
  <aside>
    <h3>人気の記事</h3>
    <ul>
      <li><a href="#">HTMLの基本</a></li>
      <li><a href="#">レスポンシブデザインの作り方</a></li>
    </ul>
  </aside>
  <nav>
    <ul>
      <li><a href="/home">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</main>

まとめ

<section>, <article>, <aside>, <nav>は、それぞれ異なる役割を持つHTML5のセクション要素です。これらを適切に使用することで、ページの構造が明確になり、SEOやアクセシビリティの向上につながります。今回のガイドを参考に、意味のあるHTMLを作成してみましょう！

最後まで読んでいただきありがとうございます！

このブログは初心者向けwebデザイナー向けにHTML、CSSの基礎知識を発信しています。
この記事を読んだ方に少しでもお役に立てれば幸いです。