【HTML】セクショニングコンテンツとは？正しい使い方と誤った例について解説！

はじめに

この記事では、HTMLを学習中の方向けにsectionタグ、articleタグ、asideタグ、navタグといったセクショニングコンテンツの基本的な理解から実践的な使い方を解説します。これらのタグを正しく使い分けることで、検索エンジンにも構造を理解してもらいやすいウェブサイトの構築ができるようになります。

この記事の対象者

• ウェブ制作を基礎からしっかり学びたい方
• セクショニングコンテンツについて学びたい方

この記事の目標

• セクショニングコンテンツの使い方を知る
• sectionタグとarticleタグを使い分けられるようになる

本記事と関連のあるHTMLタグ

• <section>
• <article>
• <main>
• <aside>
• <nav>
• その他：<h〇>, <header>, <footer>

事前知識：HTMLのコンテンツモデルについて

本記事の内容を理解するための事前知識として、コンテンツモデルについて知っておく必要があります。

HTML5になってから実装されたものでコンテンツモデルという概念があり、どの要素にどの要素を含められるかということが定義されています。

正しいマークアップを行うにはコンテンツモデルに準じてHTMLを記述しなければいけません。コンテンツモデルでは、要素の性質によって以下のカテゴリーに分類されます。

カテゴリー	説明	主なタグ
メタデータコンテンツ	HTMLの情報や他のファイルとの関係などを定義	<title><link><script><style><meta>
フローコンテンツ	要素内にテキストなどを持つもの	<address><article><aside> <audio><button><code><div> <dl><figure><footer><form> <h1><h2><h3><h4><h5><h6> <header><iframe><img><input> <nav><ol><p><script><section> <select><span><table><textarea> <ul><video><time>
セクショニングコンテンツ	要素内に見出しと概要が含まれるもの	<article><aside><nav><section>
ヘディングコンテンツ	セクションの見出しになるもの	<h1><h2><h3><h4><h5><h6>
フレージングコンテンツ	テキストなどに部分的に意味を持たせるもの	<audio><button><code> <iframe><img><input><label> <script><select><span><strong> <svg><textarea><time><video>
エンベデッドコンテンツ	ファイルなどを埋め込むもの	<audio><iframe><img><svg><video>
インタラクティブコンテンツ	ユーザーが操作できるもの	<button><iframe><input><label><select><textarea>

本記事では、これらのカテゴリーの中でもセクショニングを行う際の基本的な要素であるセクショニングコンテンツと、セクショニングコンテンツと関連の強いヘディングコンテンツやheaderタグ、mainタグ、footerタグをメインに解説します。

セクショニングコンテンツとは

セクショニングについてあまりピンと来ていない方のために簡単に説明します。セクショニングは日本語で言うところの「章立て」と考えると理解しやすいと思います。

ほとんどの文書は構造化されていて、大見出しや小見出しと本文、画像やイラストなどで構成されています。

漫画雑誌に例えると、表紙の役割がウェブページのヘッダー部分であり、雑誌内の各漫画が一つのセクションと考えることができます。また、セクションには漫画のタイトルやサブタイトルがあってストーリーが描かれています。いくつかの漫画の他にも、広告などの副次的なページがあり、最後にはフッターである裏表紙があります。

漫画雑誌なら読み手が人間なので無意識に漫画毎の区切りと副次的なページの違いを理解できますが、ウェブページの構造を検索エンジンに正しく伝えるためには適切なタグを使用する必要があります。

HTML5で章立てを行う際は、セクショニングコンテンツであるsectionタグ、articleタグ、navタグ、asideタグを使用します。これらの要素でグルーピングすることによって、ウェブページの構造を適切に表現することができます。また、divタグを使用した場合に比べてHTMLのコードが読みやすくなり、構造や意味が理解しやすくなるというメリットもあります。

sectionとarticleについて

sectionタグとarticleタグは含められる要素が同じであり、両方ともウェブページ内で何度も使われるため、どちらを使うべきか迷う場合もあるかと思います。sectionタグとarticleタグの使い方と、使い分けついて例を交えて解説します。

sectionタグ

コンテンツを構造化するためによく使用する要素としてsectionタグがあります。sectionタグを使用することでウェブページ内の独立したコンテンツのまとまりを定義できます。

sectionタグはセクショニングコンテンツのカテゴリーに属していますが、フローコンテンツにも属しているのでほとんどの要素を含めることができます。

また、sectionタグにはh1～h6のいずれかのヘディングコンテンツを含める必要がありますが、同一レベルの見出しをsectionタグの直下に含めることは適切ではありません。先ほどの漫画雑誌の例で考えると、漫画のタイトルが2つあるという意図しない構造になってしまいます。

以下は適切ではない
<section>
  <h2>大見出し</h2>
  <p>テキストが入ります。</p>
  <h2>大見出し</h2>
  <p>テキストが入ります。</p>
</section>

以下は適切
<section>
  <h2>大見出し</h2>
  <p>テキストが入ります。</p>
  <div>
    <h3>小見出し</h3>
    <p>テキストが入ります。</p>
  </div>
  <div>
    <h3>小見出し</h3>
    <p>テキストが入ります。</p>
  </div>
</section> 
 

このように、h1～h6といったヘディングコンテンツはセクショニングコンテンツ内のセクションの見出しを表現します。見出しのレベルを使い分けることでセクション内の階層構造を明確にすることができるため、セクショニングコンテンツとヘディングコンテンツは密接な関係にあります。

sectionタグは入れ子にすることができるので、以下のように記述することもできます。

<section>
  <h2>大見出し</h2>
  <p>テキストが入ります。</p>
  <section>
    <h3>小見出し</h3>
    <p>テキストが入ります。</p>
  </section>
  <section>
    <h3>小見出し</h3>
    <p>テキストが入ります。</p>
  </section>
</section> 

divタグで記述してもh2とh3を使い分けているので暗黙的に階層構造を表現できていますが、sectionタグを入れ子にすることで明示的になり理解しやすくなります。

また、section要素は子要素にheaderやfooterを含めることが出来ます。

headerタグはページ内のヘッダー部分に一度だけ使用されることが一般的ですが、section要素の基本情報をまとめる目的で使用することもできます。

footerタグもheaderタグと同様に、一般的にはページ内のフッター部分に一度だけ使用されますが、section要素の補足情報をまとめる目的で使用することもできます。

漫画雑誌に掲載された漫画を例にすると、冒頭に描かれる漫画のタイトル、書いた漫画家さんの名前、この回のタイトルは何で、何話目の話なのかといった情報がheader要素に該当すると考えられます。漫画雑誌の漫画の場合はfooter要素に含める要素は特にありませんが、強引に定義するなら最後のコマの「続く」等をfooter要素と考えることも出来なくはないです。

<section>
  <header>
    <h2>漫画のタイトル</h2>
    <p>漫画家さんの名前</p>
    <h3>1話　物語が始まります</h3>
  </header>
  <section>
    漫画の内容
  </section>
</section>

articleタグ

articleタグは、ブログ記事のような独立したコンテンツを定義するために使用します。article要素内には記事の本文や見出し、著作権情報、投稿日などが含まれることが一般的です。他のセクションやコンテンツとの関連性を持たず、単独で意味を成すコンテンツであることを表現できます。

sectionタグと同様で、articleタグもセクショニングコンテンツとフローコンテンツに属しています。なので含められる要素や見出しが必要といったところはsectionタグと変わりません。

先ほどの例ではsectionタグを使用しましたが、一部をarticleタグに置き換えることができます。

<article>
  <header>
    <h2>漫画のタイトル</h2>
    <p>漫画家さんの名前</p>
    <h3>1話　物語が始まります</h3>
  </header>
  <section>
    漫画の内容
  </section>
</article>

article要素とsection要素はお互いに含めることができます。しかし、以下の例は適切ではありません。

<section>
  <header>
    <h2>漫画のタイトル</h2>
    <p>漫画家さんの名前</p>
    <h3>1話　物語が始まります</h3>
  </header>
  <article>
    漫画の内容
  </article>
</section>

この例では、article要素内にheader要素内の情報が含まれていません。article要素は独立したコンテンツであるため、以下のように漫画の内容と密接に関係のあるheader内の要素を含む必要があります。

<section>
  <article>
    <header>
      <h2>漫画のタイトル</h2>
      <p>漫画家さんの名前</p>
      <h3>1話　物語が始まります</h3>
    </header>
    <section>
      漫画の内容
    </section>
  </article>
</section>

この漫画を4コマ漫画に例えると以下のような表現もできます。

<section>
  <article>
    <header>
      <h2>おもしろい4コマ漫画です</h2>
      <p>漫画家さんの名前</p>
    </header>
    <article>
      <h3>1話目タイトル</h3>
      <seciton>1コマ目</section>
      <seciton>2コマ目</section>
      <seciton>3コマ目</section>
      <seciton>4コマ目</section>
    </article>
    <article>
      <h3>2話目タイトル</h3>
      <seciton>1コマ目</section>
      <seciton>2コマ目</section>
      <seciton>3コマ目</section>
      <seciton>4コマ目</section>
    </article>
                ・
                ・
                ・
  </article>
</section>

article要素を入れ子にする場合、子のarticle要素が親のarticle要素と関係のあるものでなければいけないので注意しましょう。

HTMLの構造はCSSでスタイリングを行う際の作業効率やコードの読みやすさに大きく影響するので、実際にsectionやarticle内にheaderやfooterを使用するかについてはコーダーの好みが分かれるところです。また、意味のないsectionタグの入れ子を嫌う人もいたりします。チームや組織でウェブ制作を行う場合、コーディングを行うのは自分だけではないことが一般的なので、チームや組織ではどのような手法が受け入れられているかについて気を配ると良いでしょう。

asideとmainについて

ウェブページは何らかの目的があって制作されます。ウェブページでのメインコンテンツを明確することで、検索エンジンはそのページがどのようなユーザーに適した内容かを判断しやすくなります。

また、ウェブページはメインコンテンツ以外にも広告やユーザーに読んでほしい記事のリンクを配置することができます。これらをメインコンテンツと区別することで、検索エンジンに対してメインコンテンツの内容を強調させることができます。

mainタグ

mainタグは、ウェブページのメインコンテンツを表現します。他のページと共通化できない、そのページ特有の内容である必要があります。

1つのページに複数のmainタグを使用することはできず、mainタグを入れ子にすることもできません。また、ウェブサイト全体で共通化されたheaderやfooterを含むことも適切ではありません（sectionやarticle内のheader、footerは除く）。

コンテンツモデルではフローコンテンツに属します。誤解されがちですが、セクショニングコンテンツには属さないため見出しは必ずしも必要ではありません。

以下は一般的な使い方です。

<body>
  <header>共通化されたヘッダー</header>
  <main>
    ページの主な内容
  </main>
  <footer>共通化されたフッター</footer>
</body>

漫画雑誌の例では以下のように考えることができます。

<header>表表紙の内容</header>
<main>
  <article>漫画1の内容</article>
  <article>漫画2の内容</article>
  <article>漫画3の内容</article>
            ・
            ・
            ・
</main>
<footer>裏表紙の内容</footer>

main要素はアクセシビリティの面でも重要です。スクリーンリーダーを使用しているユーザーは、headerやナビゲーションメニューの情報を飛ばしてmain内の情報にアクセスすることができます。一つのウェブページには必ず一つのmainタグを使用すると覚えておきましょう。

asideタグ

asideタグは、ウェブページのメインコンテンツとは関連性の低いものを含めることができる要素です。

補足情報やおすすめ記事などの、表示されなくてもメインコンテンツに影響を与えないものはasideタグで表現でき、サイドバーでよく使用されます。

以下は一般的な使い方の例です。

<body>
  <header>共通化されたヘッダー</header>
  <main>
    ページの主な内容
  </main>
  <aside>
    サイドバー
  </aside>
  <footer>共通化されたフッター</footer>
</body>

asideタグはsectionやarticleと同様でセクショニングコンテンツとフローコンテンツに属していますが、aside要素内にaside要素を含めることはできません。sectionやarticleにaside要素を含めたり、aside要素にsectionやarticleを含めることは可能です。

<aside>
  <section>
    <h2>おすすめ記事</h2>
    <artile>記事1</article>
    <artile>記事2</article>
    <artile>記事3</article>
  </section>
  <section>
    <h2>よく読まれる記事</h2>
    <artile>記事1</article>
    <artile>記事2</article>
    <artile>記事3</article>
  </section>
</aside>

aside要素はセクショニングコンテンツに属していますが、メインコンテンツとの関連性が低いので必ずしも見出しを含める必要はありません。しかし、見出しがあった方がユーザーは分かりやすいので、上の例のように見出しを定義できる内容であれば付けた方が良いでしょう。

一般的な使い方の例ではmainの兄弟要素としてaside要素が配置されていますが、main内にaside要素を含めることも出来ます。漫画雑誌の例だと以下のようになります。

<header>表表紙の内容</header>
<main>
  <aside>
    <section>スポンサー1の広告</section>
    <section>スポンサー2の広告</section>
    <section>スポンサー3の広告</section>
  </aside>
  <article>
    <header>
      <h2>漫画1のタイトル</h2>
        <p>漫画家さんの名前</p>
        <h3>20話　物語はいい感じに進んでます</h3>
    </header>
    <section>
      漫画の内容
    </section>
    <aside>
        <img src="./img/bnr01.png" alt="漫画1の単行本1巻が発売されました！">
    </aside>
  </article>
  <article>漫画2の内容</article>
  <article>漫画3の内容</article>
            ・
            ・
            ・
</main>
<footer>裏表紙の内容</footer>

このようにaside要素はウェブページ内の様々なところに配置できますが、main内に記述する場合、メインコンテンツとの関連性が少なからず必要になるということに注意しましょう。「メインコンテンツと関係はあるが、ユーザーはこの情報が無くてもこのページの目的を果たすことができる」というものに対してasideタグを使用することが望ましいです。

ナビゲーションメニューについて

ウェブサイトはユーザビリティを考慮して構築する必要があります。サイトを訪れたユーザーがそのサイトに興味を持った場合、他のコンテンツをもっと見てみたいと考えるでしょう。ユーザーが求める情報にアクセスできるようにするためには、ナビゲーションメニューをウェブサイトに配置する必要があります。

navタグ

navタグは、ウェブサイトやページのナビゲーションメニューを表現するために使用されます。navタグを適切に活用することで、ユーザーが目的のコンテンツに簡単にアクセスできるようになります。

コンテンツモデルではセクショニングコンテンツとフローコンテンツに該当するため、ほとんどの要素を含めることが出来ます。また、navタグはセクショニングコンテンツに属していますが、asideと同様でメインコンテンツとは異なる要素なので、見出しが必ずしも必要ではありません。

navタグはul要素やol要素と一緒に使われることが一般的で、ウェブサイトではグローバルナビゲーションとしてheader内に配置されることが多いです。

記事一覧やリンク一覧といった、ナビゲーションの目的ではない要素には使用しません。ユーザーがウェブサイト内やページ内の求める情報にアクセスしやすいよう、そのお手伝いをするための要素と覚えておきましょう。

以下は一般的なnavタグの使用例です。

<header>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/service.html">サービス</a></li>
      <li><a href="/about.html">このサイトについて</a></li>
      <li><a href="/contact.html">お問い合わせ</a></li>
    </ul>
  <nav>
</header>

header要素はウェブサイト全体で共通化されていることが一般的なので、この例ではウェブサイトのすべてのページで表示されるものと仮定します。ウェブサイト全体を対象にナビゲーションするためのメニューをグローバルナビゲーションといいます。

また、縦長のウェブページの場合、ページ内リンクによるナビゲーションメニューを配置することでユーザビリティを向上させることができます。このようなウェブページ内のみを対象にしたナビゲーションメニューをローカルナビゲーションといいます。

毎度のごとく漫画雑誌で例えると、ナビゲーションメニューは掲載順に並べられた漫画の一覧ページに該当します。その雑誌を読むユーザーの多くは、掲載されている全ての漫画を読みたいわけではありません。目的の漫画にたどり着くには1ページ目からパラパラと検索する必要がありますが、掲載順に並べられた漫画の一覧ページを先に見れば検索効率が上がります。

以下は漫画雑誌の例にnavタグを追加したものです。header要素を表表紙と表現しているのでnav要素はheader要素に含んでいません。header要素内に配置されることが多いですが、このような記述も問題ありません。

<header>表表紙の内容</header>
<nav>
  <ul>
    <li>漫画1</li>
    <li>漫画2</li>
    <li>漫画3</li>
         ・
         ・
         ・
  </ul>
<nav>
<main>
  <article>漫画1の内容</article>
  <article>漫画2の内容</article>
  <article>漫画3の内容</article>
            ・
            ・
            ・
</main>
<footer>裏表紙の内容</footer>

navタグはアクセシビリティにも密接に関係しています。視覚障害をもったユーザーはスクリーンリーダーを使用してウェブサイトにアクセスできますが、navタグはそういった利用者が簡単に扱えることを考慮しています。ただ、ウェブページ内にnavタグが多く配置されているとスクリーンリーダーが上手に解釈してくれないこともあるようです。

navタグは1つのページ1度しか使えないというわけではありませんが、何のためのナビゲーションなのかを考えることが重要です。グローバルナビゲーションが複数あるといった重複は避け、アクセシビリティにも気を配って使用することが望ましいでしょう。

最後に

文章の階層構造を定義するためのセクショニングコンテンツについて解説しました。

コンテンツモデルのカテゴリー上では含めることができる要素でも、タグの意味的に違和感が生まれるようなマークアップでは、検索エンジンはウェブページの構造を正しく解釈できない可能性があります。セクショニングを行う際は特にタグの意味の理解が重要になります。

また、ブログ記事のような文章がメインのウェブページでは、文章の階層構造が複雑だとかえって分かりにくい内容になることも考えられます。記事を分けたり、重要ではない内容を省くなどの工夫をすることで、ユーザーや検索エンジンに伝わりやすいウェブページになることもあります。

sectionタグの入れ子が深くなってしまう場合は、不要なところにsectionタグを使用しているか、そもそもページの設計に問題がある可能性もあります。

整ったデザインのウェブページであればどこにsection要素を定義できるかは自然と分かるものなので、セクショニングが難しいと感じるなら、まずはすべてdivタグでマークアップを行い、後から考えるという手順でも良いです。見出しのレベルが適切であれば難しいことではないでしょう。