こんにちは！Webの世界へようこそ。HTMLを学び始めると、`header`や`footer`といったタグが、ページ全体だけじゃなくて、記事の中にも出てくることに気づいて「あれ、どっちを使えばいいの？」と混乱してしまうこと、ありますよね。

大丈夫ですよ、それは誰もが一度は通る「HTMLの迷路」です。でも、安心してください。この構造を理解すると、あなたの作るWebサイトは一気に「ブラウザや検索エンジンにとって、ものすごく読みやすい優等生」に変わります。

今日は、そんな「外側のヘッダー・フッター」と「内側のヘッダー・フッター」の役割分担を、身近な例え話でスッキリ整理していきましょう。

—

例え話でイメージしよう：「雑誌」と「記事」

Webページを「一冊の雑誌」だと想像してみてください。

• ページ全体の`header` / `footer`：これは雑誌の「表紙」や「裏表紙」です。雑誌全体のタイトルロゴがあったり、目次へのリンクや、出版社のお問い合わせ情報が載っていますよね。
• `article`内の`header` / `footer`：これは、雑誌の中にある「個別の読み切り記事」のタイトルや、著者の名前、日付の部分です。

つまり、「全体」を囲むか、「個別のコンテンツ」を囲むか。この違いだけなんです。

1. ページ全体のheader/footer

サイトのどこにいても変わらない「共通の案内板」です。

• header: サイト名、ロゴ、グローバルナビゲーション（メニュー）
• footer: 著作権表示(©)、プライバシーポリシーへのリンク、SNSアイコン

2. article内のheader/footer

その記事単体で完結する「情報カード」のようなものです。

• header: 記事のタイトル、投稿日、カテゴリー、執筆者の名前
• footer: 「この記事が気に入ったらシェアしよう！」というボタン、関連記事のリンク、執筆者のプロフィール

—

実際にコードで見てみましょう

さっそく、エディタに貼り付けて確認できるサンプルを用意しました。構造の違いに注目してみてくださいね。

—

なぜわざわざ分けるの？

「全部divタグで囲んじゃダメなの？」と思うかもしれません。実は、HTMLには「意味（セマンティクス）」という概念があります。

私たちがWebサイトを見るとき、目で見れば「あ、これは記事のタイトルだな」とわかりますよね。でも、目の不自由な方が使う「読み上げソフト」や、検索エンジン（Googleなど）は、タグという「目印」を頼りにコンテンツを理解しているんです。

`article`の中に`header`があると、「おっ、ここは記事の冒頭部分だな。じゃあ次に続くのは本文だな」と、ブラウザが親切に整理整頓してくれるわけです。これこそが、アクセシビリティ（誰にでも使いやすいこと）やSEO（検索順位の向上）への第一歩なんです！

—

つまずきポイント：どこまでがarticle？

よくある質問が「どこまでを`article`にするべき？」というもの。
答えはシンプルです。「その部分だけを切り取って、別の場所（例えばTwitterやRSSリーダー）に転載しても意味が通じるか？」を基準にしてみてください。

• ブログの投稿記事 → OK（`article`で囲む）
• サイトのサイドバーにある「最新記事一覧」 → NG（これらはリンク集なので、`aside`などが適しています）

—

まとめ：あなたのコードが「伝わる」ようになる

最初は難しく感じるかもしれませんが、「全体（サイト）」と「個体（記事）」の役割を分ける、これだけ意識すれば大丈夫です。

• ページ全体を包むのは「外側のヘッダー・フッター」
• 記事の内容を包むのは「内側のヘッダー・フッター」

このルールを守るだけで、あなたの書いたコードは驚くほど論理的で、誰にとっても優しいものになります。

「HTMLのタグなんてどれを使っても同じでしょ？」と思われがちですが、こうやって意味を込めてあげる作業は、まるで手紙に心を込めるのと同じくらい大切なんです。ぜひ、次の制作から意識してみてくださいね。応援しています！