ウェブページって、ただの情報の山じゃつまらないですよね？ここでは、その情報をきれいに整理して、みんなにわかりやすく伝えるための特別なタグを紹介します。これらを使えば、ウェブページがぐんとわかりやすくなりますよ！

記事タグ <article>

これは何？

一つの完全な記事やブログポストを囲むときに使います。

どんなときに使う？

あなたのブログの各記事や、ニュースの各ニュース記事にぴったり！

例

あなたのブログポスト：

<article>
  <h2>素晴らしいレシピ</h2>
  <p>このレシピで、あなたもプロのシェフに！</p>
</article>

セクションタグ <section>

これは何？

関連する情報のかたまりをまとめるときに使います。

どんなときに使う？

お話の章、レシピの手順、あるいはあなたのページの異なる部分を区切るのに！

例

レシピの手順を分けて説明：

<section>
  <h3>材料</h3>
  <p>卵、砂糖、小麦粉...</p>
</section>
<section>
  <h3>調理手順</h3>
  <p>卵を割ります...</p>
</section>

サイドコンテンツタグ <aside>

これは何？

メインの話とはちょっと違う補足情報を置く場所です。

どんなときに使う？

広告や、関連記事リンク、あるいは面白い豆知識などをサイドに置くのに使います。

例

関連記事や広告：

<aside>
  <h3>関連記事</h3>
  <ul>
    <li>キッチンの基本ツール</li>
    <li>30分でできる簡単レシピ</li>
  </ul>
</aside>

ヘッダータグ <header>

これは何？

ウェブページやセクションの最上部、つまり「顔」の部分です。

どんなときに使う？

サイトのタイトルやナビゲーションメニューを入れるのに最適です。

例

ウェブサイト全体のヘッダー：

<header>
  <h1>マイレシピブログ</h1>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">レシピ</a></li>
      <li><a href="#">コンタクト</a></li>
    </ul>
  </nav>
</header>

フッタータグ <footer>

これは何？

ページの最下部、情報の「おしり」の部分です。

どんなときに使う？

コピーライト情報やお問い合わせリンクを置くのに使います。

例

ページのフッター：

<footer>
  <p>© 2023 マイレシピブログ</p>
</footer>

まとめ

これらのセマンティックタグを使って、ウェブページの各部分が何を意味しているのかを明確にします。これにより、訪問者にとっても、検索エンジンにとっても、内容を理解しやすいウェブページを作成することができます。さあ、これらのタグを使って、あなたのウェブページをもっと魅力的に整理しましょう！