前回は基本的に使用されるタグについての解説をしました。
今回はWebページの情報のグループ化についてまとめていきます。

ここでのグループ化ですが、
Webページのbody要素内においての情報を分類することを指します。

このグループ化を行うことの何が良いかというと、以下の２点があげられます。

・どんな情報が内容に記載されているかが明示されることでコードの可読性が高くなる
・CSSを用いた際にまとめてスタイルを適用できる

これらを踏まえて説明していきたいと思います。

グループ化に使用されるタグ

<main></main>

…主要なコンテンツ領域を意味します。このタグは１度のみ使用できます。
　下記の例に挙げられる補助的コンテンツはタグ内に含めないようにします。
　・<header></header>
　・<footer></footer>
　・<nav></nav>
　・<aside></aside>

<nav></nav>

…HTML内において、サイト内の主要なリンクやメニューを囲むために使用されるタグです。

<section></section>

…HTML内において章分けやセクションを分けたり、隣り合う異なる話題同士を分けるために使用されるタグです。

<article></article>

…HTML内において独立したコンテンツを表すために使用されるタグです。
　ブログの投稿やニュース記事など、文書内で独立した意味を持つかたまりを囲むために使用されるタグです。

<aside></aside>

…捕捉情報や関連情報を示すために使用されるタグ。画面に表示される広告等にも使用されます。

<footer></footer>

…文章やセクションのフッター部分を示すために使用されるタグです。
　基本的にページの下部に配置され、著作権情報や連絡先等が含まれます。

まずはこれら上記のタグを使用した例をご紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>例</title>
  <style>
    body{
      background-color: rgb(255, 244, 193);
    }
    header{
      background-color: rgb(255, 101, 35);
    }
    header h1{
      color:white
    }
    nav{
      background-color: rgb(255, 239, 116);
    }
    main {
      background-color: white;
    }
    main section{
      background-color: rgb(255, 239, 116);
    }
    aside{
      background-color: rgb(152, 255, 150);
    }
    footer{
      background-color:  rgb(255, 101, 35);
    }
    footer p{
      color:  white;
    }
  </style>
</head>
<body>
  <header>
    <h1>日記（header）</h1>
  </header>
  <nav>
    <a href="#">（nav）</a>
    <a href="#">今日の献立</a>
    <a href="#">明日の献立</a>
  </nav>
  <main>
    <article>
      <h1>今日の出来事（main内のarticle）</h1>
      <p>今日は犬と散歩しました。<br>すごく可愛かったです。<br>散歩中に近所の方からジャーキーをいただいて嬉しそうでした。<br><br>帰宅したら夕ご飯の支度をしようとおもいます。</p>
    </article>

    <section>
      <h2>明日やるToDoリスト(main内のsection１)        
      </h2>
      <ol>
        <li>宿題</li>
        <li>買い出し</li>
        <li>資格勉強</li>
        <li>犬の散歩</li>
      </ol>
    </section>
    <section>
      <h2>今週中にやるToDoリスト(main内のsection２)        
      </h2>
      <ol>
        <li>資格勉強の申し込み</li>
        <li>ネットショッピングでほしいものを注文</li>
        <li>料金支払い</li>
      </ol>
    </section>
  </main>
  <aside>〇〇セール500円引き！（aside）</aside>
  <footer>
    <p>&copy; 2024 kida（footer）</p>
  </footer>
</body>
</html>

画像だと以下のようになります。どこがどの部分か分かりやすく色付けしました。

グループ分けにおいてこれが間違いなく正しいということはありませんが、
一例としてこのような使用方法となります。

ちなみに、articleやsection等の意味を特に持たせたくない場合は下記のような方法で
要素をグループ化することができるので最後にご紹介します。

意味を持たない要素のグループ化

<div></div>

…汎用的なコンテナ要素。特に意味を持たず、
　他要素をグループ化するために使用されるタグです。
　特定の要素の塊を作って、CSSを使用してスタイルを適用したり、
　JavaScriptで操作したりする際に使用します。

<div class="container">
  <p>例</p>
</div>

<span></span>

…インライン要素をグループ化するために使用されるタグです。こちらも特に意味を持たず、
　スタイルを適用したり、JavaScriptで操作したりするために使用されます。
　（例）p要素で囲まれた文字列の一部を色付けする等

<p>一部が<span style="color:red">赤色</span>で表示されます。</p>