HTMLの区切りタグって建築設計図みたい！40代初心者のWebサイト構造体験記 HTMLのページ内の区切り方を理解しよう

こんにちは！40代プログラミング初心者のAIATTOです。

今日はHTML学習の8章「HTMLのページ内の区切り方を理解しよう」に挑戦しました。

本日で学習継続13日目を迎えました！

今日学んだのは「HTMLのページ内の区切り方」という、まさにWebサイトの骨組みを作る技術です。この学習を通して、HTMLって本当に建築設計図を描くような感覚だなと実感しました。

今日の大発見：Webサイトは部屋割りが命！
navタグでの衝撃体験
articleとsectionの使い分けで混乱した話
40代だからこそ感じる「構造化」の大切さ
明日への期待

今日の大発見：Webサイトは部屋割りが命！

これまでheader、main、footerという大まかな部屋割りは理解していましたが、今日はさらに細かい部屋割りを学びました。nav（ナビゲーション）、article（記事）、section（セクション）という3つの新しいタグです。

例えるなら、今まで「1階、2階、3階」としか分けられなかった家に、「リビング、キッチン、寝室」といった具体的な部屋名を付けられるようになった感じです！

navタグでの衝撃体験

navタグを実際に書いてみて驚いたのは、「あ、これがWebサイトの案内板なんだ！」という気づきでした。駅の案内板のように、訪問者が迷わずに目的の場所に行けるようにする役割なんですね。

<!DOCTYPE html>
<html> 

<body> 
  <header> 
    <h1>ヘッドラインニュース</h1> 
    <nav>
      <a href="layout.html">ホーム</a>
      <a href="https://www.google.com">スポーツ</a>
      <a href="https://www.google.com">経済</a>
      <a href="https://www.google.com">天気</a>
    </nav> 
  </header>

  <main> 
  </main>

  <footer> 
  </footer>
</body>

</html>

このコードを書いているとき、「自分がWebサイトの設計者になった気分」になりました。訪問者のことを考えながら、どんなメニューが必要かを考える作業が楽しかったです。

articleとsectionの使い分けで混乱した話

正直に言うと、articleタグとsectionタグの使い分けで最初は混乱しました。「どっちも内容を囲むタグなのに、なぜ2つもあるの？」と思ったんです。

でも実際にニュースサイトの例を作ってみて理解できました！articleは「新聞紙」全体で、sectionは「新聞紙の中の各記事」という感じなんですね。速報記事と天気予報記事を別々のsectionで囲むことで、「これは別々の記事ですよ」と明確に区別できます。

<!DOCTYPE html>
<html> 

<body> 
  <header> 
    <h1>ヘッドラインニュース</h1> 
    <nav>
      <a href="layout.html">ホーム</a> 
      <a href="https://www.google.com">スポーツ</a>
      <a href="https://www.google.com">経済</a>
      <a href="https://www.google.com">天気</a>
    </nav> 
  </header>

  <main> 
    <article>
      <section>
        <h2>速報</h2> 
        <h3>動物園でゾウの赤ちゃん誕生！</h3> 
        <p>市内の動物園でゾウの双子の赤ちゃんが生まれました。赤ちゃんの名前を募集中です。</p> 
      </section> 
      <section>
        <h2>気象情報</h2> 
        <h3>全国の天気</h3> 
        <p>全国的に晴れますが、山間部で一時的に雪が降るところがあります。</p> 
      </section> 
    </article> 
  </main>

  <footer> 
  </footer>
</body>

</html>