articleとsectionの違いと使い分け【HTML】

HTMLの最新版であるHTML Living Standard(旧HTML5)には、構造化タグが存在しています。
構造化タグは、ヘッダーをheaderタグ・フッターをfooterタグで囲むなど、より人間とクローラーが読みやすいソースコードの記述に役立っています。
そんな構造化タグには、articleタグやsectionタグも存在しています。これらの意味がよく分からず、使い分けにくさを感じている人もいるのではないでしょうか。

本記事では、articleタグとsectionタグの意味や使い分け方などについて解説します。

articleタグとsectionタグの意味を解説

articleタグやsectionタグは「セクショニング要素」と呼ばれ、書籍が章や項目で内容を区切るのと同様に、範囲を明確にする要素として存在します。
現HTMLではセクショニング要素で範囲を区切ることで、ページ構造を人間やクローラーにとって読みやすいものにしているのです。
セクショニング要素には以下の4種類があります。

• article
• section
• aside
• nav

asideタグは、「ページ内のメインコンテンツとは関連性の薄い補足要素を示すもの」で、navタグは「その範囲がナビゲーションメニューであることを示すもの」です。
しかしarticleタグとsectionタグは意味が似ており、実際のコーディング時に少し混乱しがちです。

そのためここからは、articleタグとsectionタグの意味の違いについて、詳しく解説していきます。

articleタグ

articleタグは、「サイト内で自己完結しており、独立したコンテンツとして成立する要素の範囲を示すもの」です。
articleは「記事・論説」という意味であり、ブログの記事やコメントなどにはこのarticleタグが使用されます。

画像の例ですとサイト名「ペコプラのSEO対策」やパンくずなどの部分と、コピーライトなどの部分を除いた記事内容全体をarticleで囲んでいます。

ブログ記事「そもそもSEOとは」はブログ記事で完結しており、コメント枠はコメントだけで完結しているので、<article></article>で囲むというわけです。

sectionタグ

sectionタグは、「その要素の範囲が一般的な章・節・項であることを示すもの」です。
また、h(見出し)タグを含むことが推奨されています。

画像の例ですと「メリットとデメリット」と、枠の中の「メリット」は全てひとまとまりになるものなので、sectionタグで囲むことが可能です。
また、その中の項である「−メリット」も見出しとそれにかかる詳細と合わせひとまとまりになるものなので、同様に<section></section>で囲むなど、sectionの中にsectionを書いて入れ子にして使う事もできます。

articleタグとsectionタグの違い

articleタグとsectionタグの違いを整理すると、次のようになります。

• articleタグ：サイト内の独立したコンテンツに使用。入れ子にして使用した場合、子要素は親要素に関係する必要がある
• sectionタグ：サイト内コンテンツの章・節・項に使用。囲った範囲内では<h1>〜<h6>の使用が推奨されている

divタグとの違い

divタグは「コンテンツをグループ化するために使うタグ」であり、それ自体に意味はありません。
そのため、セクショニング要素を使用せずにdivタグでマークアップをすることも可能ですが、divタグでは「その要素はどの範囲までか」を示すにはクラス名を設定するしかありません。

しかし分かりにくいクラス名を設定してしまえば、非常に読みにくいソースコードになってしまうだけではなく、クローラーにページ構造を上手く伝えられません。
そのため、なるべくarticle・sectionなどのセクショニング要素を使用したほうが良いのです。

コーディングでのarticleタグとsectionタグの使い方

ここからはarticleタグとsectionタグの使い分け方について、実際のコーディング例を示していきます。

articleタグの使い方

articleタグは、以下のように使用します。

h1をarticleタグに含める

articleタグを入れ子にして使用するときは、以下のようにします。
その際、articleで囲った範囲内にh1タグを使用できます。

<div class="h1">ペコプラのSEO対策(ブログ名)</div>

<!-- 1つの記事のまとまり -->
　<article>
　　　<h1>そもそもSEOとは(記事タイトル)</h1>
　　　<p>SEOとは、Search Engine Optimizationの略。
    ユーザがGoogle、Yahooなどで検索するキーワードで上位化させ、
    目立たせることで集客、プランディングにつなげる事になります。...</p>

　　　<h2>メリットとデメリット(記事見出し)</h2>
　　　<p>SEO対策のメリットとは...
　　　　　　　　　...</p>

  <!-- 記事とは独立したまとまり -->
　　　<article> 
　　　　　　<h2>記事へのコメント</h2>
　　　　　　<p>□□□：1サイトの費用はいくら位になりますか？</p>
　　　　　　<p>△△△：どれ位の日数が掛かりますか？</p>
　　　</article>

　</article>

「記事へのコメント」は記事タイトル「そもそもSEOとは」とは独立した内容なのでarticleで囲います。

sectionタグの使い方

続いてsectionタグは以下のように使用します。

h1をsectionタグに含める

h1タグは主に記事・コンテンツのタイトルを示すタグですが、このタグをsectionタグ内に含めると、次のとおりになります。

<section>
　　<h1>そもそもSEOとは(記事タイトル)</h1>
　　<p>SEOとは、Search Engine Optimizationの略。
    ユーザがGoogle、Yahooなどで検索するキーワードで上位化させ、
    目立たせることで集客、プランディングにつなげる事になります。...</p>
</section>

h(見出し)タグを含むことが推奨されており、見出しとパラグラフ(pタグ)で最小のセットとなります。

h3をsectionタグで囲む

h3タグは記事の3番目に大きな見出しですが、このタグをsectionタグ内に含めると、次のとおりになります。

<!-- 見出しとそれに関する内容のまとまり -->
<section>
　　<h2>メリットとデメリット(記事見出し)/h2>
　　<p>SEO対策のメリットとは...
    ...</p>

<!-- 章の中の節や項となる見出しと、それに関する内容のまとまり -->
　<section> 
　　　<h3>メリット</h3>
　　　<p>・検索結果の上位に表示されれば注目度UP!
     ...</p>
　</section>

</section>

sectionタグも入れ子にすることが可能なので、大section「メリットとデメリット」内に小section「メリット」を配置する事ができます。

articleタグとsectionタグの使い分け方

articleタグとsectionタグは、以下のように記事全体を囲むにはarticle、記事の各見出しごとにsection、というように使用することをおすすめします。

<div class="h1">ペコプラのSEO対策(ブログ名)</div>

　<!-- 1つの記事のまとまり -->
　<article>

 <!-- 見出しとそれに関する内容のまとまり -->
　　<section> 
　　　　<h1>そもそもSEOとは</h1>
　　　　<p>SEOとは、Search Engine Optimizationの略。
    ユーザがGoogle、Yahooなどで検索するキーワードで上位化させ、
    目立たせることで集客、プランディングにつなげる事になります。...</p>
　　</section>

　　<section>
　　　　<h2>メリットとデメリット(記事見出し)</h2>
　　　　<p>SEO対策のメリットとは...
    ...</p>
　　</section>

　　<section>
　　　　<h2>ペコプラ独自の対策(記事見出し)</h2>
　　　　<p>ペコプラ独自のSEO対策とは...
    ...</p>
　　</section>

　</article>

mainタグ・asideタグなど他の要素との使い分け方

mainタグは、「ページ内のメインコンテンツ全体を囲むための要素」であり、ページ中で1回だけ使用できます。
articleと併用する場合は、必ずarticle要素を囲む形で使用しなければなりません。
このmainタグと、メインコンテンツとの関係性が薄い補足要素を示すaside要素とは、以下のように使用します。

<div class="h1">ペコプラのSEO対策(ブログ名)</div>

<!-- このブログの主要部分 -->
　<main>
　　<article>

　　　<section>
　　　　<h1>そもそもSEOとは(記事タイトル)</h1>
　　　　<p>SEOとは、Search Engine Optimizationの略。
    ユーザがGoogle、Yahooなどで検索するキーワードで上位化させ、
    目立たせることで集客、プランディングにつなげる事になります。...</p>
　　　</section>

　　　<section>
　　　　<h2>メリットとデメリット(記事見出し)</h2>
　　　　<p>SEO対策のメリットとは...
　　　　　　　　　...</p>
　　　</section>

　　　<section>
　　　　　<h2>ペコプラ独自の対策</h2>
　　　　　<p>ペコプラ独自のSEO対策とは...
　　　　　　　　　　　...</p>
　　　</section>

　　</article>

　</main>

 <!-- メインとは関係の薄いまとまり -->
　　　<aside> 
　　　　　<h2>記事へのコメント</h2>
　　　　　<p>□□□：1サイトの費用はいくら位になりますか？</p>
　　　　　<p>△△△：どれ位の日数が掛かりますか？</p>
　　　</aside>

記事がブログ「ペコプラのSEO対策」の主要部分であるためmainで囲います。

articleタグ・sectionタグはいらない？

articleタグ・sectionタグなどのセクショニング要素は、サイトのデザインには反映されず、CSSでのスタイル設定やJavaScriptでの操作指定先にすることはできません。
そのため、articleタグ・sectionタグはいらないように思えます。

しかし、先に述べたようにセクショニング要素は、ページ構造を分かりやすくするために使うものです。
ページ構造が分かりやすければ、人間がサイトをメンテナンスするときに作業がしやすかったりクローラーがページ構造を読み取りやすかったりします。
それは業務効率の向上やSEO対策につながるので、なるべくarticleタグ・sectionタグを使うようにしましょう。

まとめ

articleタグとsectionタグを使うことで、クローラーがサイトの構造を読み取りやすくなります。
一見すると地味ですが、きちんとタグを使い分けることで、SEO対策にもつながります。

また、サイトをメンテナンスする時にもコードを読みやすいので、人間とクローラーが読みやすいソースコードを書くように心がけてみてください。
この記事が美しいマークアップに役立つと幸いです。