HTML では、bodyタグ の中に、ホームページに表示する文字や画像などの内容を書きます。
body 内に書かれた内容は、基本的に HTML の上から順番にブラウザへ表示されます。
例えば、文章や画像を上から順番に並べるだけでも、ホームページとして表示することはできます。
しかし、実際の Webサイト では、ただ内容を並べるだけではなく、それぞれの役割に合わせて HTML を分けて書くことが一般的です。
例えば、
・ページ上部のロゴやメニュー
・ページの中心となるサービス紹介や記事本文
・補足情報
・ページ下部の会社情報やコピーライト
など、内容ごとに意味を持たせて区切ります。
そのために使われるのが、header、main、section、article、aside、footer などのタグです。
これらのタグは、ホームページを表示するために必ず必要なものではありません。使わなくても文字や画像を表示することはできます。
では、なぜわざわざ body 内を意味ごとに分けるのでしょうか？
それは、HTML の内容を分かりやすくし、後から修正や管理をしやすくするためです。また、ページ構造を正しく伝えることで、利用する人や管理する人にも理解しやすい HTML になります。
ここでは、個別のタグの詳しい書き方ではなく、body 内を役割ごとに分ける理由と、そこで使われる6つのタグの全体像を初心者向けに解説します。
それぞれのタグの具体的な使い方については、個別の記事で詳しく紹介していますので、必要に応じて読み進めてください。
HTMLのbody内を役割ごとに分ける理由
HTML を書き始めたばかりの頃は、
「ブラウザに正しく表示されているなら、わざわざタグを細かく分ける必要はないのでは？」
と思うかもしれません。
実際、HTML では文字や画像を上から順番に書くだけでも、ホームページとして表示できます。
しかし、Webサイト制作では、body内の内容を役割ごとに分けて書くことが基本です。
なぜなら、HTML は単に画面に表示するためのものではなく、「この部分は何を表しているのか」という意味を伝える役割も持っているからです。
body内を役割ごとに分ける主な理由は、以下の3つです。
(1) HTMLの内容（コード）を分かりやすくするため
Webサイトの HTML は、ページが大きくなるほど文章や画像、設定する部分が増えていきます。
そのとき、すべてを divタグ だけで囲んでしまうと、コードを見ただけでは、それぞれの部分が何を表しているのか分かりにくくなります。
例えば、
<div>
会社情報
</div>
<div>
サービス紹介
</div>この場合、どちらがページ上部なのか、どちらが中心となる内容なのか、コードだけでは判断しにくいです。
一方で、
<header>
会社情報
</header>
<main>
サービス紹介
</main>と書けば、
・header → ページ上部の情報
・main → ページの中心となる内容
という役割がすぐに分かります。
(2) 後から修正や管理をしやすくするため
Webサイトは、公開したら終わりではありません。
運営していく中で、
・文章の変更
・新しいページの追加
・デザインの変更
など、何度も修正が発生します。
もしHTMLが役割ごとに整理されていなければ、
「どこを修正すればいいのか分からない」
「別の場所まで影響してしまった」
といった問題が起こりやすくなります。
あらかじめ、
<header>
ヘッダー部分
</header>
<main>
メイン内容
</main>
<footer>
メイン内容
</footer>のように分けておけば、
「ヘッダーを変更したいからheader内を修正する」
というように、必要な部分だけ安全に編集できます。
(3) 利用する人にもページ構造を伝えやすくするため
body 内を役割ごとに分ける理由として、もう1つ重要なのがアクセシビリティです。
Webサイト を利用する人の中には、画面を見るだけではなく、スクリーンリーダーなどの支援技術を使ってページを閲覧する人もいます。
header、main、aside、footer などの意味を持つタグを使うことで、支援技術に対して、
・ここはページ上部の情報
・ここがメインの内容
・ここは補足情報
・ここがページ下部の情報
というページ構造を伝えやすくなります。
その結果、利用者は必要な場所へ移動しやすくなり、より使いやすい Webサイト につながります。
つまり、body 内を役割ごとに分けることは、見た目を整えるためだけではなく、人にも機械にも理解しやすい HTML を書くために重要な考え方です。
＜補足＞
なお、HTML で役割ごとに分けておくことは、CSS でデザインを設定するときにも役立ちます。
例えば、
<header>
サイト名やメニュー
</header>
<main>
サービス紹介
</main>
<footer>
会社情報
</footer>のように分けておけば、
・headerだけ背景色を変更する
・mainの横幅を調整する
・footerの文字色を変更する
といった設定が簡単になります。
ただし、header や main などのタグは、デザインを適用するためのタグではありません。
ページの役割や意味を表すことが本来の目的であり、CSS でデザインを設定しやすくなるのは、その副次的なメリットです。
HTML5で広まったセマンティックHTML
現在では、header や main などのタグを使って HTML を書くことが一般的です。
しかし、これらのタグは最初から存在していたわけではありません。
ここでは、セマンティック HTML が広まった背景と、現在の考え方について紹介します。
HTML5以前はdivタグでページ構造を作っていた
以前の HTML では、ページの各部分を区切るときに、主に divタグ が使われていました。
例えば、ページ上部やメインコンテンツ、ページ下部も、次のように divタグ で囲んで表現することが一般的でした。
<div id="header">
...
</div>
<div id="main">
...
</div>
<div id="footer">
...
</div>このように書けばページを作ることはできますが、divタグ 自体には意味がありません。
そのため、HTML を見ても、「ここがページ上部なのか」「ここがメインコンテンツなのか」といった役割は、id や class の名前を見なければ判断できませんでした。
そこで HTML5 では、ページ内での役割をタグそのものが表せるように、意味を持つタグ（セマンティックHTML）が追加されました。
例えば、ページ上部には header、ページの中心となる内容には main、ページ下部には footer を使用することで、HTML を見るだけで、それぞれの役割が分かるようになります。
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>このように、タグ自体が「この部分は何を表しているのか」という意味を持っているHTMLをセマンティックHTMLと呼びます。
現在のセマンティックHTMLの考え方
以前は、「セマンティック HTML を正しく使うと SEO に有利になる」と言われることもありました。
しかし現在では、header や article などのタグを書いたことだけを理由に、検索順位が大きく変わるわけではありません。
また、現在でも divタグ が不要になったわけではなく、レイアウトのグループ化や CSS を適用するためなど、さまざまな場面で利用されています。
大切なのは、「すべてを div で書く」「すべてをセマンティック HTML で書く」と考えることではありません。
ページ内で役割が明確な部分には header や main などの意味を持つタグを使い、それ以外のグループ化にはdivタグを使うなど、それぞれの役割に応じて適切に使い分けることが重要です。
HTML5で広まったセマンティックHTML
現代の Web制作 では、body 内を役割ごとに分けるために、主に次の6つのタグが使われています。
それぞれのタグには「ページ内でどのような役割を持つ部分なのか」という意味があり、ホームページ全体の構造を分かりやすく表すことができます。
ここでは、それぞれのタグの役割を簡単に紹介します。
詳しい使い方や書き方については、各解説記事をご覧ください。
① headerタグ
headerタグ は、ページやセクションの導入部分を表すタグです。
サイト名やロゴ、ナビゲーションメニューなど、ページの最初に表示される内容をまとめるときに使用します。
＞＞HTMLのheaderタグの使い方｜どこに書く？配置・書き方・使用時の注意点をわかりやすく解説
② mainタグ
mainタグ は、そのページの中心となる内容を表すタグです。
サービス紹介や記事本文など、ページの主役となるコンテンツをまとめるときに使用します。
＞＞HTMLのmainタグの書き方・実装方法｜正しい配置ルールとサンプルコード、使わないケースを解説
③ sectionタグ
sectionタグ は、関連する内容をテーマごとにまとめるタグです。
サービス紹介や料金案内など、内容をまとまりごとに分けたい場合に使用します。
＞＞HTMLのsectionタグの使い方｜配置場所や正しい使い方を初心者向けに解説
④ articleタグ
articleタグ は、それだけで独立した内容として成り立つコンテンツを表すタグです。
ブログ記事やニュース記事、お知らせなどに使用します。
＞＞HTMLのarticleタグの使い方｜配置場所や使えるコンテンツ、使うメリットをわかりやすく解説
⑤ asideタグ
asideタグ は、メインコンテンツを補足する情報を表すタグです。
関連記事やサイドバー、補足説明などを配置するときに使用します。
＞＞HTMLのasideタグの使い方｜位置・入れ子・サイドバー・広告の使用例、sectionなどの構造タグとの配置関係
⑥ footerタグ
footerタグ は、ページやセクションの下部に配置する情報を表すタグです。
コピーライトや会社情報、お問い合わせ先などをまとめるときに使用します。
＞＞HTMLのfooterタグの正しい位置とは？書ける場所と使い方を初心者向けに解説
6つのタグを使ったHTML構造例
ここまで、body 内で使われる代表的な6つのタグについて紹介しました。
では、これらのタグを実際に組み合わせると、HTML の構造はどのようになるのか。
ここでは、個別の書き方や細かなルールではなく、ページ全体の基本的な骨組みを確認します。
どのタグが、どこの位置に配置されているかという全体の骨組み
まずは、「どのタグがどの位置に配置されているのか」に注目してください。
<body>
<header>
サイト名やロゴ、メニュー
</header>
<main>
<section>
サービス紹介やお知らせ
</section>
<article>
ブログ記事やニュース記事
</article>
<aside>
関連記事や補足情報
</aside>
</main>
<footer>
会社情報やコピーライト
</footer>
</body>このように、body の中ではページの役割ごとにタグを配置していきます。
この構造例のポイント
header・main・footerはページ全体の大きな構造を作る
header、main、footer は、ページ全体の大きな役割を表す代表的なタグです。
基本的には、ページ全体の構造として以下のように使用します。
・header → ページ上部の情報
・main → ページの中心となる内容
・footer → ページ下部の情報
特に mainタグ は、そのページで最も重要な内容を表すため、1ページにつき1つだけ使用するのが基本です。
ただし、header や footer は、ページ全体だけでなく、article や section などの中で使用する場合もあります。
例えば、ブログ記事（article）の中に記事タイトルや投稿日などをまとめる header を配置したり、記事の最後に投稿者情報などをまとめる footer を配置したりすることがあります。
そのため、「headerやfooterは必ず1ページに1つ」と覚えるのではなく、
ページ全体の header・main・footer は基本的に1つずつ使用する
と理解しておくとよいでしょう。
section・article・asideは必要に応じて複数使用できる
一方で、section、article、aside は、ページ内の内容をさらに分けるために使用するタグです。
そのため、ページの内容に合わせて複数配置することができます。
例えば、
・section → サービス紹介、料金案内、会社概要など、テーマごとのまとまりに使用
・article → 複数のブログ記事やニュース記事など、独立したコンテンツごとに使用
・aside → 関連記事や補足情報など、必要な場所に使用
というように、役割を持った内容が複数ある場合は、それぞれに対応するタグを使用します。
ただし、タグの数を増やせばよいわけではありません。
大切なのは、「その部分がどのような役割を持っているのか」を考え、適切なタグを選ぶことです。
HTMLのbody内は分けなくても表示できる
ここで一度、HTML を学び始めたばかりの方が最初に理解しておくべき、とても大切な「安心ポイント」をお伝えします。
結論から言うと、HTML ではこれまで紹介した構造タグを使わずに、以下のようにシンプルに書くだけでも、ブラウザには全く問題なく正常に表示されます。
<body>
<h1>会社名</h1>
<p>サービス紹介</p>
<p>お問い合わせ</p>
</body>この HTML に header や main が書かれていなくても、
・文字が表示されない
・ホームページが開かない
・レイアウトが崩れる
といった問題が起こるわけではありません。
つまり、header、main、section などのタグは、ホームページを表示するために必ず必要なタグではありません。
これらのタグを使う目的は、HTMLの中で、
・ここはページ上部の情報
・ここがページの中心となる内容
・ここは補足情報
・ここがページ下部の情報
といったように、それぞれの部分がどのような役割を持っているのかを明確にすることです。
これにより、コードを管理する人がページ構造を理解しやすくなり、支援技術にもページ構造を伝えやすくなります。
Web制作の現場では、
・複数の制作者が同じコードを確認する
・公開後も長期間サイトを管理する
・さまざまな利用者が使いやすいサイトを作る
といったことが求められます。
そのため、header、main、section などの役割を理解し、適切に使えることは、Web制作 における重要な基礎知識になります。
