ホームページの内容は、すべて bodyタグの中に書きます。
しかし、実際のホームページでは、これらのパーツを上から順番に並べるだけではありません。

例えば、
・ページ上部のロゴやメニュー
・ページの中心となるサービス紹介や記事本文
・補足情報
・ページ下部の会社情報やコピーライト
のように、役割ごとにエリアを分けて作ります。

そこで使うのが、header、main、section、article、aside、footer といった body 内の役割を分けるためのタグです。

「また新しいタグを覚えるのは難しそう…」と思うかもしれません。
でも安心してください。

これらのタグは、ホームページを表示するために必ず必要なものではありません。
タグを使わなくても、文字や画像を表示することはできます。

では、なぜわざわざ区切るのでしょうか？

それは、HTML の内容を分かりやすく整理し、後から修正しやすいホームページにするためです。

ここでは、body 内を区切る6つのタグの役割と全体像を理解することを目的にしています。

今回は「ホームページの地図」を覚えるイメージで大丈夫です。

それぞれのタグの詳しい使い方や書き方については、個別記事でさらに詳しく解説していますので、必要に応じて読み進めてください。

なぜbody内を区切るの？
body内を区切らなくてもホームページは表示される
body内を区切る6つのタグ
ホームページ全体の構造例
サービス紹介
料金案内
ブログ記事
1. 関連記事
2. ブラウザで表示される見た目は変わらない
まとめ

なぜbody内を区切るの？

HTMLでは、<body> と </body> の間にホームページに表示する内容を書きます。

しかし、文字や画像などのパーツを上から順番に並べるだけでも表示できるため、
「わざわざ header や main などのタグで区切る必要があるの？」
と思うかもしれません。

body 内を区切る一番の目的は、ページの中身を役割ごとに整理することです。

例えば、会社のホームページなら、
・上部 → ロゴやメニュー
・中央 → サービス紹介や会社情報
・下部 → 会社情報やコピーライト
のように、それぞれ役割があります。

これらを専用のタグで区切ることで、HTML のコードが読みやすくなり、後から修正するときも管理しやすくなります。

body 内を区切る主な理由は、以下の4つです。
① コードの内容が分かりやすくなる
区切りがないHTMLでは、文章や画像が増えるほど、
「ここは何の部分なのか」
が分かりにくくなります。

例えば、

<h1>〇〇会社</h1>
<p>会社紹介</p>
<p>サービス内容</p>
<p>お問い合わせ</p>

だけでは、それぞれの文章の役割がコードを見るだけでは判断しにくくなります。

一方で、

<header>
<h1>〇〇会社</h1>
</header>

<main>
<p>会社紹介</p>
<p>サービス内容</p>
</main>

<footer>
<p>お問い合わせ</p>
</footer>

のように区切ると、

「ここはサイト上部」
「ここがメインの内容」
「ここがページ下部」

ということがすぐに分かります。

② 後から修正や更新がしやすくなる
ホームページは公開した後も、
・文章を変更する
・新しい情報を追加する
・メニューを変更する
など、何度も修正することがあります。

そのとき、役割ごとに整理されていれば、
「ヘッダー部分だけ変更する」
「サービス紹介部分だけ修正する」
という作業が簡単になります。

③ CSSでデザインしやすくなる
HTML で区切りを作っておくと、CSS でそれぞれの部分にデザインを設定できます。

例えば、
・header だけ背景色を変える
・main の幅を調整する
・footer の文字色を変更する
といった設定がしやすくなります。

HTML でページの構造を作り、CSS で見た目を整えるという役割分担ができます。

④ ページの内容を理解しやすくなる
header や main などのタグを使うと、HTML を見る人だけでなく、検索エンジンやホームページを管理するツールなども、ページの構造を理解しやすくなります。

ただし、注意したいのは、
これらのタグを書いたから、必ず検索順位が上がるというものではありません。
大切なのは、ページの内容を正しく整理し、利用者にも管理者にも分かりやすい HTML にすることです。

body内を区切らなくてもホームページは表示される

headerやmainなどのタグを見ると、
「これを書かないとホームページが作れないのでは？」
と思うかもしれません。

しかし、実際にはこれらのタグを使わなくても、ホームページはブラウザに正しく表示されます。

HTML では、文字を書くタグや画像を表示するタグを使うことで、ページを作ることができます。

つまり、header や main などのタグは、表示するために必ず必要なタグではありません。

これらは、ホームページの内容を分かりやすく整理するために使われるタグです。

body内を区切る6つのタグ

body の中を整理するために使われる代表的なタグが、
・header
・main
・section
・article
・aside
・footer
の6つです。

これらのタグは、ホームページのどの部分に、どのような役割の内容が入っているのかを分かりやすくするために使います。

headerタグ

headerタグは、ページ上部に配置される情報をまとめるためのタグです。
ホームページの「顔」となる部分で、主に以下のような内容を入れます。
・ロゴ
・サイト名
・ナビゲーションメニュー
・ページタイトル

例えば、会社のホームページなら、最初に表示される会社名やメニュー部分が header にあたります。

＞＞HTMLのheaderタグとは？役割・使う場所・基本の書き方を初心者向けに解説

mainタグ

mainタグは、そのページで最も重要な中心部分を表すタグです。

例えば、
・商品紹介
・サービス内容
・記事本文
・会社紹介
など、ページの目的となる内容を入れます。

ポイントとして、mainタグは1つのページにつき基本的に1回だけ使用します。

＞＞HTMLのmainタグとは？役割・基本的な使い方を初心者向けにわかりやすく解説

sectionタグ

sectionタグは、関連する内容をひとつのまとまりとして区切るためのタグです。

例えば、
・サービス紹介
・料金案内
・お知らせ
・会社概要
など、内容ごとに分けたい場合に使用します。

ホームページの中身を「章」や「テーマごとのグループ」に分けるイメージです。

＞＞HTMLのsectionタグとは？意味や役割、書き方・divタグとの違いを初心者向けに解説

articleタグ

articleタグは、それだけを切り離しても意味が通じる独立した内容を表すタグです。

代表的な例は、
・ブログ記事
・ニュース記事
・商品レビュー
・お知らせ記事
などです。

例えば、ブログ記事一覧ページでは、それぞれの記事1つ1つを article で囲むことができます。

＞＞HTMLのarticleタグとは？意味や役割、基本的な書き方、使わない場合について初心者向けに解説

asideタグ

asideタグは、メインとなる内容を補足する情報を表すタグです。

例えば、
・関連記事
・サイドバー
・広告
・補足説明
などが該当します。

ページの中心ではないものの、読者にとって役立つ情報をまとめる場所です。

＞＞HTMLのasideタグとは？意味・役割・書き方を初心者向けに解説

footerタグ

footerタグは、ページの一番下に配置する情報をまとめるためのタグです。

主に以下のような内容を入れます。
・コピーライト
・会社情報
・お問い合わせ先
・プライバシーポリシー
・利用規約

ホームページの最後に表示される情報をまとめる場所と考えると分かりやすいです。

実際のホームページでは、これらのタグを組み合わせてページ全体の構造を作っていきます。

＞＞HTMLのarticleタグとは？意味や役割、基本的な書き方、使わない場合について初心者向けに解説

ホームページ全体の構造例

実際のホームページでは、以下のように役割ごとにタグを使って内容を整理します。

<body>

<header>
  <h1>〇〇株式会社</h1>
  <nav>
    ホーム　会社情報　サービス　お問い合わせ
  </nav>
</header>

<main>

  <section>
    <h2>サービス紹介</h2>
    <p>
      私たちはWeb制作サービスを提供しています。
    </p>
  </section>

  <section>
    <h2>料金案内</h2>
    <p>
      制作料金やサービス内容を紹介します。
    </p>
  </section>

  <article>
    <h2>ブログ記事</h2>
    <p>
      ホームページ制作に関する記事です。
    </p>
  </article>

  <aside>
    <h3>関連記事</h3>
    <p>
      HTML入門記事はこちら
    </p>
  </aside>

</main>

<footer>
  <p>
    © 〇〇株式会社
  </p>
</footer>

</body>

ブラウザではこのように表示されます