HTML5 でコンテンツを構造化する：section/header/aside/article 要素の役割とベストプラクティス

2024-04-02

HTML5 のベストプラクティス：section/header/aside/article 要素

各要素の概要

section: コンテンツの独立したまとまりを表します。例えば、ブログ記事、製品ページ、サイドバーなど。
header: コンテンツのヘッダー部分を表します。記事の見出し、ナビゲーション、ロゴなど。
aside: メインコンテンツとは別に補足的な情報を表示するための要素です。サイドバー広告、関連記事、補足説明など。
article: 独立した文書を表します。ブログ記事、ニュース記事、フォーラム投稿など。

使用例

<section>
  <header>
    <h1>記事の見出し</h1>
  </header>

  <article>
    <p>本文</p>

    <aside>
      <p>関連記事</p>
    </aside>
  </article>
</section>

ベストプラクティス

各要素の意味に合った内容を記述する。
ネスト構造を適切に利用する。
各要素に適切な ID や class を付与する。
スクリーンリーダーなどの補助技術を考慮する。

メリット

コンテンツの構造が明確になり、読みやすくなる。
アクセシビリティが向上する。
SEO に有利になる。

HTML5 の section、header、aside、article 要素は、Web ページの構造化をより明確にするために役立ちます。これらの要素を正しく使用することで、ユーザーにとって見やすく、理解しやすいページを作ることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 のベストプラクティス：section/header/aside/article 要素</title>
</head>
<body>
  <header>
    <h1>ブログ</h1>
    <nav>
      <a href="#">ホーム</a>
      <a href="#">記事一覧</a>
      <a href="#">お問い合わせ</a>
    </nav>
  </header>

  <section id="main-content">
    <h2>記事タイトル</h2>

    <article>
      <p>本文</p>

      <aside>
        <h3>関連記事</h3>
        <ul>
          <li><a href="#">関連記事1</a></li>
          <li><a href="#">関連記事2</a></li>
          <li><a href="#">関連記事3</a></li>
        </ul>
      </aside>
    </article>
  </section>

  <footer>
    <p>Copyright &copy; 2024</p>
  </footer>
</body>
</html>