Modern HTML 1-2｜セマンティックHTMLとページ構造｜section・article・divを使い分ける

この回で分かること

Modern HTML 1-1では、HTMLを単なる「ページの骨組み」ではなく、意味・構造・基本動作をブラウザへ伝えるレイヤーとして捉え直しました。

今回は、その考え方を実際のページ構造へ落とし込んでいきます。

今回のポイントは、タグをたくさん使うことではありません。

「この部分は何を表しているのか」からHTML要素を選べるようになること

が目標です。

前回のミニチェック｜Modern HTML 1-1 回答・解説

Modern HTML 1-1では、Modern HTMLの基本となる考え方として、Semantic HTMLやNative HTML Firstについて確認しました。

ここで、前回のミニチェック3問を振り返ります。

Q1｜レイアウトのためだけでもsectionを使う？

前回の問題は、

「レイアウトのためだけに要素をグループ化したい場合でも、必ず意味を持つsection要素を使った方がよいでしょうか？」

という内容でした。

答え：いいえ。レイアウトのためだけなら、divが候補になります。

sectionは、単に要素をまとめるための箱ではありません。

1つのテーマを持ったコンテンツのまとまりを表す場合に使う要素です。

一方、

「横並びにしたい」

「余白を付けたい」

「CSSを適用するために囲みたい」

といった、レイアウトやスタイルのためだけのグループ化であれば、そこへ新しい意味を持たせる必要はありません。

そのような場合は、divのような汎用コンテナが候補になります。

大切なのは、

divを避けることがSemantic HTMLなのではない

という点です。

意味がある場所には意味を持つHTML要素を使い、意味を追加する必要がない場所ではdivを使います。

Q2｜1記事分の独立したコンテンツは何を使う？

前回の問題は、

「記事一覧の中にある『1記事分の独立したコンテンツ』は、section・article・divのどれが候補になるでしょうか？」

という内容でした。

答え：articleが候補です。

articleは、その部分だけを取り出しても独立したコンテンツとして成立する内容に使えます。

例えば記事一覧の中に、

・記事タイトル
・投稿日
・概要
・記事へのリンク

などを持つ1記事分のまとまりがあり、それぞれが独立した記事を表しているのであれば、articleとして考えられます。

ここでも、

カードのような見た目だからarticleを使う

わけではありません。

その内容が、

独立した1つのコンテンツとして成立するか

から判断します。

Q3｜横並びにするだけのラッパーは何を使う？

前回の問題は、

「画像と文章を横並びにするためだけのラッパーは、section・article・divのどれが候補になるでしょうか？」

という内容でした。

答え：divが候補になります。

画像と文章を横並びにすること自体は、コンテンツの意味ではなくレイアウトの話です。

そのラッパーに、

「1つのテーマを持つsection」

「独立したコンテンツを表すarticle」

といった意味が特にないのであれば、無理にセマンティックな要素を使う必要はありません。

divでまとめて、横並びの見た目はCSSで指定する方法が自然です。

つまり、

HTMLでは意味や構造を表し、見た目やレイアウトはCSSで整える

という役割分担になります。

セマンティックHTMLとは？

Semanticは、日本語では「意味」に近い言葉です。

セマンティックHTMLでは、見た目や配置だけではなく、そのコンテンツが持つ意味や役割を考えてHTMLを選びます。

例えばページ上部に横長のエリアがあるからheaderを使う、右側にあるからasideを使う、という考え方ではありません。

大切なのは、

そのコンテンツがページの中でどんな役割を持っているか

です。

ページ全体の構造をセマンティックHTMLで考える

Webページには、さまざまな役割を持つ領域があります。

代表的なものを整理すると、

• ページやコンテンツの導入
• ナビゲーション
• ページの主要コンテンツ
• 独立した記事
• テーマを持つまとまり
• 補足情報
• フッター情報

などがあります。

HTMLには、こうした役割を表すための要素があります。

ページ構造の基本例をCODE-01で確認します。

<header>
  <p>サイト名</p>

  <nav aria-label="メインナビゲーション">
    <a href="/">ホーム</a>
    <a href="/about/">このサイトについて</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>Modern HTMLを学ぶ</h1>
      <p>公開日：2026年8月25日</p>
    </header>

    <section>
      <h2>セマンティックHTMLとは？</h2>
      <p>内容の意味からHTML要素を選びます。</p>
    </section>

    <aside>
      <h2>関連情報</h2>
      <p>Modern HTMLシリーズの補足情報です。</p>
    </aside>

    <footer>
      <p>この記事の補足情報</p>
    </footer>
  </article>
</main>

<footer>
  <p>© ToshiLab</p>
</footer>

<header>
  <p>サイト名</p>

  <nav aria-label="メインナビゲーション">
    <a href="/">ホーム</a>
    <a href="/about/">このサイトについて</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>Modern HTMLを学ぶ</h1>
      <p>公開日：2026年8月25日</p>
    </header>

    <section>
      <h2>セマンティックHTMLとは？</h2>
      <p>内容の意味からHTML要素を選びます。</p>
    </section>

    <aside>
      <h2>関連情報</h2>
      <p>Modern HTMLシリーズの補足情報です。</p>
    </aside>

    <footer>
      <p>この記事の補足情報</p>
    </footer>
  </article>
</main>

<footer>
  <p>© ToshiLab</p>
</footer>

CODE-01を見ると、単なる箱の集合ではなく、それぞれの部分に役割が与えられていることが分かります。

ここから各要素を整理します。

headerは「ページ上部」という意味ではない

headerは、ページやセクション、記事などの導入部分を表すために使います。

サイト全体のheaderであれば、

• サイト名
• ロゴ
• 導入情報
• ナビゲーション

などが含まれることがあります。

一方、articleの中にもheaderを置くことができます。

例えば記事タイトル、公開日、著者情報などをarticleの導入情報としてまとめることもできます。

つまりheaderは、

「画面の一番上に置く箱」

ではありません。

そのコンテンツの導入部分という意味で考えます。

navは主要なナビゲーションを表す

navは、ページ内の主要なナビゲーションを表します。

例えば、

• サイトのメインメニュー
• パンくずリスト
• 記事内目次
• セクション間を移動するナビゲーション

などが候補になります。

ただし、ページ内にあるすべてのリンクをnavで囲む必要はありません。

単に本文中に関連記事へのリンクが1本あるだけなら、それだけでnavにする必要はありません。

また、1ページにnavは1つしか使えないわけではありません。

役割の異なるナビゲーションが複数ある場合は、複数のnavを使うこともできます。

複数使う場合の例をCODE-02で確認します。

<nav aria-label="メインナビゲーション">
  <a href="/">ホーム</a>
  <a href="/web-programming/">WEBプログラミング</a>
</nav>

<nav aria-label="パンくずリスト">
  <a href="/">ホーム</a>
  <a href="/web-programming/">WEBプログラミング</a>
  <span>Modern HTML</span>
</nav>

<nav aria-label="メインナビゲーション">
  <a href="/">ホーム</a>
  <a href="/web-programming/">WEBプログラミング</a>
</nav>

<nav aria-label="パンくずリスト">
  <a href="/">ホーム</a>
  <a href="/web-programming/">WEBプログラミング</a>
  <span>Modern HTML</span>
</nav>

mainはそのページの主要コンテンツ

mainは、そのページで中心となる主要なコンテンツを表します。

例えばブログ記事ページなら、

サイト共通のヘッダーやメニューではなく、

そのページ固有の記事本文側

がmainの中心になります。

asideは「右側にあるもの」ではない

asideを見ると、サイドバーを思い浮かべるかもしれません。

しかしasideは配置位置で決まる要素ではありません。

asideは、

主要な内容に関連する補足的なコンテンツ

を表します。

例えば記事の中に、

• 関連情報
• 補足説明
• 用語解説
• 関連記事
• 著者プロフィール

などがある場合、内容によってasideの候補になります。

右側に表示していても、主要コンテンツそのものならasideではありません。

逆に、本文の途中に表示されていても補足情報ならasideになることがあります。

footerもページ最下部だけではない

footerは、ページ全体の最下部にだけ使う要素ではありません。

サイト全体のfooterでは、

• 著作権情報
• サイト補足情報
• フッターナビゲーション

などをまとめることがあります。

一方、articleの中でもfooterを使えます。

記事の末尾に、

• 著者情報
• 更新日
• 関連情報

などをまとめる場合です。

headerと同じように、

ページ全体にも、個別コンテンツにも使える

と考えておくと分かりやすくなります。

section・article・divをどう使い分ける？

Modern HTMLで特に迷いやすいのが、

section・article・divです。

この3つは見た目だけでは違いが分かりません。

判断するときは、

「このまとまりにはどんな意味があるのか」

を考えます。

section

sectionは、関連する内容をテーマごとにまとめた領域です。

例えば、

「特徴」

「料金」

「よくある質問」

「お問い合わせ」

のように、名前を付けられるまとまりがsectionの候補になります。

実際のページでは、そのテーマを表す見出しと一緒に使うことが多くなります。

article

articleは、その部分だけでも独立したコンテンツとして成立する内容を表します。

例えば、

• ブログ記事
• ニュース記事
• 投稿
• レビュー
• 掲示板の投稿

などが候補です。

ページから切り離しても「1つの記事・投稿として成立するか」を考えると判断しやすくなります。

div

divは、特別な意味を持たない汎用的なコンテナです。

例えば、

• CSSで横並びにする
• 複数要素へ同じスタイルを適用する
• レイアウトのためだけにグループ化する

といった用途で使えます。

意味がないから悪い要素なのではなく、

意味を持たせる必要がない場所で使える要素

です。

実際のコードCODE-03で違いを確認します。

<!-- テーマを持つまとまり -->
<section>
  <h2>よくある質問</h2>
  <p>質問と回答をまとめます。</p>
</section>

<!-- 独立して成立するコンテンツ -->
<article>
  <h2>Modern HTMLの記事</h2>
  <p>この記事単体でも内容が成立します。</p>
</article>

<!-- レイアウト用の汎用コンテナ -->
<div class="card-layout">
  <p>CSSでレイアウトするためにまとめます。</p>
</div>

<!-- テーマを持つまとまり -->
<section>
  <h2>よくある質問</h2>
  <p>質問と回答をまとめます。</p>
</section>

<!-- 独立して成立するコンテンツ -->
<article>
  <h2>Modern HTMLの記事</h2>
  <p>この記事単体でも内容が成立します。</p>
</article>

<!-- レイアウト用の汎用コンテナ -->
<div class="card-layout">
  <p>CSSでレイアウトするためにまとめます。</p>
</div>

sectionに見出しは必須？

sectionについて学ぶと、

「sectionには必ず見出しが必要なのか」

という疑問が出てきます。

HTMLの文法として、sectionの中に必ず見出しを書かなければならないという単純なルールではありません。

ただし実際の制作では、

「何についてのsectionなのか」が分かる見出しを持つ構造

の方が理解しやすくなります。

もし見出しもテーマも付けられず、

「CSSを当てるためにとりあえず囲っただけ」

であれば、本当にsectionなのかを見直す価値があります。

その場合はdivの方が自然かもしれません。

articleの中にsectionを入れてもよい

articleとsectionは競合する要素ではありません。

例えば1つの記事の中に、

• 導入
• 特徴
• 使い方
• 注意点
• まとめ

というテーマがあるなら、

articleの中を複数のsectionで構成することができます。

反対に、sectionの中に複数の独立したarticleが入ることもあります。

例えば「最新記事」というsectionの中に、複数の記事カードをarticleとして並べる構造です。

つまり、

articleとsectionは上下関係が固定されているわけではありません。

内容の意味によって構造が決まります。

見出し階層はHTML要素の入れ子だけでは決まらない

ここはModern HTMLで特に重要です。

以前の解説では、

「sectionの中に入れれば見出しレベルを自動的に考えてくれる」

ような印象を持つことがありました。

しかし実際の記事制作では、

h1・h2・h3などの見出し階層を自分で明示的に設計する

と考えた方が安全です。

sectionの中だから自動的にh2になる、articleの中だから自動的にh1になる、と期待しません。

実際の見出し構造をCODE-04で確認します。

<main>
  <article>
    <h1>Modern HTML 1-2</h1>

    <section>
      <h2>セマンティックHTMLとは？</h2>

      <section>
        <h3>sectionの考え方</h3>
        <p>関連する内容をテーマごとにまとめます。</p>
      </section>
    </section>

    <section>
      <h2>まとめ</h2>
      <p>見出し階層は自分で設計します。</p>
    </section>
  </article>
</main>

<main>
  <article>
    <h1>Modern HTML 1-2</h1>

    <section>
      <h2>セマンティックHTMLとは？</h2>

      <section>
        <h3>sectionの考え方</h3>
        <p>関連する内容をテーマごとにまとめます。</p>
      </section>
    </section>

    <section>
      <h2>まとめ</h2>
      <p>見出し階層は自分で設計します。</p>
    </section>
  </article>
</main>

ブラウザで見た目が変わらなくても意味は違う

section・article・divをブラウザへ表示しても、CSSを付けなければ見た目の差がほとんどないことがあります。

そこで、

「結局どれを使っても同じでは？」

と感じるかもしれません。

しかしセマンティックHTMLの違いは、見た目だけを作るためのものではありません。

HTMLの構造や意味を、

• ブラウザ
• 支援技術
• 検索エンジン
• コードを読む開発者

へ伝えるための土台になります。

Modern HTMLでは、

見た目が同じでもHTMLとして意味が違うことがある

という感覚が大切です。

実務ではどこで使う？

この判断は、実際のWeb制作でかなり頻繁に使います。

WordPressテーマ

WordPressの記事テンプレートを見ると、

mainの中にarticleがあり、そのarticleの中に複数のsectionが存在する構造も珍しくありません。

テーマを読むときに、それぞれの役割を理解しやすくなります。

記事一覧やカードUI

ニュース一覧、ブログ一覧、商品レビュー一覧などでは、

1つずつ独立して成立する項目をarticleとして扱えるケースがあります。

LPやサービスページ

「特徴」「料金」「FAQ」「お問い合わせ」など、テーマごとにまとまった領域はsectionとして考えやすい例です。

CSSレイアウト

意味は持たせず、単純にFlexboxやGridを適用するためだけのラッパーならdivが候補になります。

コードレビュー

「なぜsectionなのか」

「なぜarticleなのか」

「これはdivで十分ではないか」

と説明できるようになると、HTMLのレビューもしやすくなります。

今回できるようになったこと

Modern HTML 1-2 ミニチェック

今回の内容を使って3問考えてみます。

Q1

「最新記事」というまとまりの中に、独立した記事カードが5件あります。

「最新記事」全体と、各記事カードには、それぞれsection・article・divのどれが候補になるでしょうか？

Q2

ブログ記事本文の横に「この記事を書いた人」という補足プロフィールがあります。

内容が記事本文を補足するものであれば、asideは候補になるでしょうか？

Q3

sectionの中へh3を書いた場合、ブラウザが自動的に「正しい見出しレベル」へ調整してくれるでしょうか？

まとめ

Modern HTML 1-2では、セマンティックHTMLとページ構造を整理しました。

大切なのは、

「どのタグを使えばモダンに見えるか」

ではありません。

コンテンツの意味からHTMLを選ぶこと

です。

sectionは関連するテーマのまとまり。

articleは独立して成立するコンテンツ。

divは意味を持たせない汎用コンテナ。

そしてheader・nav・main・aside・footerも、見た目の配置ではなく役割から判断します。

見出しについても、HTML要素の入れ子任せにせず、ページ全体の構造を考えてh1〜h6を明示的に選びます。

これが、Semantic HTMLを実際の制作へ落とし込むための基本になります。

前回を確認する

Modern HTML 1-1では、

Modern HTMLとは何か、Semantic HTML、Native HTML First、HTML・CSS・JavaScriptの責務

を整理しました。

前回を復習｜Modern HTML 1-1

Modern HTML 1-1｜Modern HTMLとは？現在のWeb制作に合わせてHTMLを学び直す

次に読む

次回は、

Modern HTML 1-3｜見出し・文章・コンテンツの意味設計

へ進みます。

strong・em・b・i、mark・small・del・ins、time・abbr・code・pre、引用、リスト、figureなどを、

見た目ではなく「その内容は何を意味しているのか」

から選び分けていきます。

ミニチェックの回答は1-3で掲載

Modern HTML 1-3｜見出し・文章・コンテンツの意味設計｜見た目ではなく意味からHTMLを選ぶ

toshi

フルスタックエンジニア

XFacebookInstagramContact

C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。