html5/section,articleの活用事例（1） | 福岡LP(ランディングページ）ホームページ制作

sectionとarticleの活用事例を含めて解説させて頂きます。

html
<!DOCTYPE html>
<html>
<head>
  <title>オンラインマガジン</title>
</head>
<body>
  <header>
    <h1>オンラインマガジン</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">カテゴリー</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <header>
      <h2>トピックス</h2>
    </header>
    <article>
      <h3>新製品の発売が決定しました</h3>
      <p>当社は新しい製品の発売を発表しました。この製品は...（記事の内容）...</p>
    </article>
    <article>
      <h3>イベントのお知らせ</h3>
      <p>来週行われるイベントの詳細が決定しました。参加希望の方は...（記事の内容）...</p>
    </article>
  </section>

  <section>
    <header>
      <h2>特集記事</h2>
    </header>
    <article>
      <h3>インタビュー: 有名アーティストに迫る</h3>
      <p>我々は有名アーティストとのインタビューを行いました。その中で...（記事の内容）...</p>
    </article>
    <article>
      <h3>町の歴史: 魅力ある過去と未来</h3>
      <p>町の歴史に迫る特集記事。過去から未来にかけての変遷を紐解きます。</p>
    </article>
  </section>

  <footer>
    <p>&copy; 2023 オンラインマガジン. All rights reserved.</p>
    <p><a href="#">プライバシーポリシー</a> | <a href="#">利用規約</a></p>
  </footer>
</body>
</html>


    
      ファッションアイテム
    
    トレンドのファッションアイテムをご紹介。服、シューズ、アクセサリーなど多彩なアイテムを取り揃えています。
    ファッションアイテム一覧を見る

この例文では、<section>要素を使用して記事をトピックごとにグループ化し、<article>要素で個々の記事を包んでいます。<header>要素は各セクションや記事のタイトルを示すために使用されています。これにより、コンテンツの構造が明確になり、セクションと記事が意味的に関連付けられています。

このように<section>と<article>を活用することで、ウェブページの構造が整理され、検索エンジンがコンテンツを適切に理解しやすくなります。また、アクセシビリティも向上し、ユーザーエクスペリエンスが向上します