headerタグとmainタグとfooterタグの使い方

<header>、<main>、および<footer>は、HTML5で導入されたセマンティックなタグであり、ウェブページの構造化に役立ちます。

<header>タグは、ウェブページのヘッダーセクションを定義するために使用されます。これには、サイトのロゴ、ナビゲーション、およびその他の重要な情報が含まれる場合があります。

例えば、以下のように使用することができます。

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>タグは、ウェブページのメインコンテンツを定義するために使用されます。これには、記事、画像、ビデオ、その他のメディアなどが含まれる場合があります。

例えば、以下のように使用することができます。

<main>
  <article>
    <h2>My Article Title</h2>
    <p>My article content goes here.</p>
  </article>
  <img src="image.jpg" alt="My Image">
</main>

<footer>タグは、ウェブページのフッターセクションを定義するために使用されます。これには、著作権情報、連絡先情報、サイトマップ、ソーシャルメディアアイコンなどが含まれる場合があります。

例えば、以下のように使用することができます。

<footer>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

以上のように、これらのタグは、ウェブページのセクションをより正確に定義するために使用することができます。これにより、ウェブページの意味を明確にし、アクセシビリティを向上させることができます。