HTMLのmain・article・sectionの使い分けを完全ガイド！初心者でもわかる構造タグの基本

HTML mainとarticle・sectionの使い分け判断基準

先生と生徒の会話形式で理解しよう

生徒

「先生、HTMLのmainとかarticleとかsectionって、いつ使い分ければいいんですか？」

先生

「それぞれページの中での意味が少し違うんです。mainはページの主要コンテンツ、articleは独立した記事、sectionは意味ごとに分けた区切りを表すタグですよ。」

生徒

「でも、全部文章をまとめるためのタグに見えるんですけど…」

先生

「そう思うかもしれませんね。ポイントは『意味を伝える構造』です。検索エンジンもこの意味を理解して、SEOに有利になるんですよ。」

1. mainタグとは？

mainタグは、そのページの中心的なコンテンツを表すHTMLタグです。ナビゲーションやフッターなどの共通部分ではなく、ページを開いた人が最も注目する内容を囲むために使います。SEO対策でも重要で、検索エンジンはmainタグの中の内容を「このページの主要テーマ」と判断します。


<main>
    <h1>旅行ブログ：北海道のおすすめ観光地</h1>
    <p>北海道には自然豊かな観光スポットがたくさんあります。四季折々の魅力を紹介します。</p>
</main>

ブラウザ表示

2. articleタグとは？

articleタグは、独立した情報の塊を表すときに使います。ニュース記事やブログの個別投稿など、他の場所に移動しても意味が通じる内容が対象です。SEOでも、記事単位で内容を整理できるため検索エンジンに理解されやすくなります。


<article>
    <h2>札幌の人気ラーメン店ランキング</h2>
    <p>札幌で人気のラーメン店を5店紹介します。それぞれの特徴やおすすめメニューを解説。</p>
</article>

ブラウザ表示

3. sectionタグとは？

sectionタグは、意味のあるまとまりごとに区切るときに使います。見出し（h2～h6）と一緒に使うことが多く、ページの中で内容を整理し、読みやすくします。SEOでは、sectionごとにキーワードを整理することで検索エンジンが内容を理解しやすくなります。


<section>
    <h3>アクセス方法</h3>
    <p>札幌駅から徒歩5分、バスでも簡単にアクセスできます。</p>
</section>

ブラウザ表示

4. main・article・sectionの使い分けの基本

簡単に言うと、mainはページのメインコンテンツ全体、articleは独立した記事、sectionは記事やページの中の意味ごとの区切りです。例えるなら、mainは本の本文全体、articleは章ごとのストーリー、sectionは章の中の段落ごとの内容です。


<main>
    <article>
        <h2>観光スポット紹介</h2>
        <section>
            <h3>美瑛の青い池</h3>
            <p>青い池は四季折々の景色が楽しめる人気スポットです。</p>
        </section>
        <section>
            <h3>富良野のラベンダー畑</h3>
            <p>夏にはラベンダーが一面に咲き、香りも楽しめます。</p>
        </section>
    </article>
</main>

ブラウザ表示

5. SEOに有利な構造化のコツ

main、article、sectionタグを正しく使うと、検索エンジンがページの内容を理解しやすくなります。特に記事ページでは、articleタグを使って個別の記事を明確にすることが重要です。sectionタグには適切な見出しを付けて、キーワードも自然に盛り込みましょう。


<main>
    <article>
        <h2>北海道の温泉旅行ガイド</h2>
        <section>
            <h3>登別温泉の魅力</h3>
            <p>登別温泉は多彩な泉質が楽しめ、露天風呂も充実しています。</p>
        </section>
        <section>
            <h3>定山渓温泉のおすすめ宿</h3>
            <p>家族旅行に最適な宿からカップル向けまで紹介します。</p>
        </section>
    </article>
</main>

ブラウザ表示

6. 見出しや段落と組み合わせるとよりわかりやすく

sectionタグはh2～h6の見出しと組み合わせると意味が明確になります。またpタグで文章を段落ごとに分けることで、ユーザーにも検索エンジンにも理解しやすいページになります。mainやarticleとの組み合わせでページ全体の情報整理が簡単にできます。


<main>
    <article>
        <section>
            <h3>おすすめカフェ</h3>
            <p>札幌にはおしゃれなカフェがたくさんあります。休憩や打ち合わせに最適です。</p>
        </section>
        <section>
            <h3>おすすめレストラン</h3>
            <p>地元の食材を使った料理が楽しめるレストランを紹介します。</p>
        </section>
    </article>
</main>

ブラウザ表示

7. main・article・sectionを使うときの注意点

mainタグは1ページに1つだけにする、articleは独立性のあるコンテンツだけに使う、sectionは意味のあるまとまりに使うことが大切です。これを守ると、HTMLの構造が正しくなり、SEOやアクセシビリティの面でも有利になります。


<main>
    <article>
        <section>
            <h3>観光情報まとめ</h3>
            <p>ここまで紹介した観光スポットやグルメ情報をまとめています。</p>
        </section>
    </article>
</main>

ブラウザ表示

8. まとめの前に覚えておきたいポイント

main、article、sectionを正しく使うことで、Webページの構造が明確になり、検索エンジンにヒットしやすいページになります。記事ごと、セクションごとに意味を整理し、見出しや段落を適切に組み合わせることが重要です。初心者でも、このルールを守ればすぐにSEOに強いHTMLが作れます。

まとめ

今回の記事では、HTMLのmain、article、sectionタグの使い分けについて詳しく解説しました。mainタグはページの中心となる主要コンテンツを囲むために使用し、ナビゲーションやサイドバー、フッターなどの共通要素とは区別します。articleタグは独立性のある記事やニュース、ブログ投稿などに使い、他のページやコンテキストに移動しても意味が通じる情報を整理できます。sectionタグはページ内で意味のある区切りを作る際に活用し、見出し（h2～h6）や段落（p）と組み合わせることで内容を明確化します。

特にSEOを意識する場合、mainタグ内にページ全体のテーマを示すコンテンツを配置し、articleタグで個別の記事を整理、sectionタグで段落ごとの意味を付与することで、検索エンジンが内容を正しく理解しやすくなります。また、sectionタグごとにキーワードを自然に盛り込むことで、検索順位の向上にも役立ちます。さらに、ページの可読性やアクセシビリティの面でも、これらのタグを適切に使うことが推奨されます。

例えば旅行ブログを作る場合、mainタグで「北海道観光情報」を囲み、その中に複数のarticleタグを設置して「ラーメン店ランキング」や「温泉ガイド」といった独立した記事を作成します。そして、各記事内でsectionタグを用いて「アクセス方法」「営業時間」「おすすめメニュー」などの内容ごとに区切ると、ユーザーにも検索エンジンにもわかりやすい構造になります。これにより、SEO効果が高まり、ユーザー体験も向上します。

 <main> <article> <h2>札幌のおすすめ観光スポット</h2> <section> <h3>大通公園</h3> <p>四季折々のイベントや花壇が楽しめる、札幌の中心的公園です。</p> </section> <section> <h3>すすきのエリア</h3> <p>夜の街として有名で、美味しい飲食店やバーが多くあります。</p> </section> </article> <article> <h2>小樽観光ガイド</h2> <section> <h3>運河エリア</h3> <p>歴史的建造物が立ち並び、観光客に人気のスポットです。</p> </section> <section> <h3>寿司店巡り</h3> <p>新鮮な海鮮が楽しめるお店が多く、地元グルメを堪能できます。</p> </section> </article> </main>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「先生、main、article、sectionの違いが少しずつ理解できてきました。でも、実際にブログを書くとき、どの順番で使えばいいか迷います」

先生

「基本は順番よりも意味を優先することです。ページ全体の中心コンテンツをmainで囲み、その中で独立した記事があればarticle、さらに内容を細かく区切る場合はsectionを使います。順序よりも『どのコンテンツが独立しているか』『どの部分が主要か』を意識しましょう」

生徒

「なるほど、sectionは段落やトピックごとに使うんですね。SEO的にも重要ということでしたよね」

先生

「そうです。sectionごとに見出しとキーワードを整理すると、検索エンジンがページ内容を理解しやすくなります。また、ユーザーも見やすくなります。例えば旅行ブログなら、『観光スポット』『温泉』『グルメ』など、記事ごとに整理すると自然にSEOに有利になります」

生徒

「記事内でもsectionを使い分けると、ブログ全体の構造がわかりやすくなるんですね。じゃあ、見出しの階層も重要ですか？」p>