Web制作の世界へようこそ！HTMLを書き始めたばかりの頃って、正直「`
今日は、HTML5から登場した「セクション構成要素」について、難しい言葉は抜きにして、私たちの身近な例えと一緒に紐解いていきましょう。
—
HTMLは「Webページの骨組み」という名の地図
家を建てるとき、いきなり壁紙を貼ったり家具を置いたりしませんよね？まずは「ここがキッチンで、ここがリビング、ここが寝室」と区切る骨組みを作ります。
HTMLのセクション構成要素（`header`, `nav`, `main`, `article`, `section`, `footer`）は、まさにその「部屋の区切り」です。これらを適切に使うことで、検索エンジンやブラウザに「このページはこういう構成になっていますよ」と親切に教えてあげることができるんです。
1. `header`：家の「玄関・表札」
ページを開いて一番上にある、ロゴやキャッチコピーがある場所です。家の顔ですね。「ここからこのページが始まりますよ！」という挨拶の場所だと考えてください。
2. `nav`：家の「案内板」
メニューボタンが並んでいる場所です。他のページへ移動するための「地図」や「標識」の役割を果たします。
3. `main`：家の「リビング」
そのページで一番伝えたい、メインの内容が詰まった場所です。1ページに1回だけ使うのがルール。ここが一番の主役です！
4. `article`：家の「個室・独立した記事」
ブログ記事やニュースなど、「それ単体でも意味が通じるもの」を囲みます。例えば、あなたが書いた日記の投稿一つひとつがこれに当たります。
5. `section`：家の「スペース・区画」
関連する内容をひとまとめにする「箱」です。「お知らせコーナー」や「プロフィール紹介」など、テーマごとに区切る時に使います。
6. `footer`：家の「裏口・連絡先」
著作権情報やSNSへのリンクなど、ページの一番最後に置く場所です。
—
実際にコードで組み立ててみよう！
では、これらをどう組み合わせるのか、シンプルなテンプレートを見てみましょう。怖がらなくて大丈夫、パズルのように当てはめるだけです。
僕のブログサイト
今日のお昼ごはん
今日は美味しいカレーを食べました。
関連記事
他にも美味しいカレー屋さんの情報を載せています。
—
「どれを使えばいいの？」と迷ったら
初心者のうちは、「これは`section`？それとも`article`？」と迷ってしまうことがよくあります。でも、最初から完璧を目指さなくて大丈夫です！
まずは、「ここがヘッダーだな」「ここがメインの中身だな」と、自分の中で役割を意識して囲むことから始めてみてください。それだけで、以前のあなたよりもずっと読みやすく、Google検索にも優しいコードが書けているはずです。
現場からのアドバイス
もし迷ったら、こう考えてみてください。
- 「それ単体で切り取っても意味がわかる？」 → なら `article`
- 「なんとなくグループ分けしたいだけ？」 → なら `section`
この程度のゆるい感覚でOKです！Web制作は、ルールに縛られるよりも、まずは「誰かに何かを伝える」という楽しさを大切にしてくださいね。
皆さんが書いたコードが、誰かの役に立つ素敵なページになることを心から応援しています。また何か迷ったときは、いつでもここに戻ってきてくださいね！
コメント