違いを解説君

あるゆる物事の"違い"をわかりやすく解説する情報マガジン

インターネット

ITの違い

【HTML5】articleとsectionの違いをわかりやすく解説!意味や使い方をチェック

『HTML5』から新たに導入された『article』と『section』タグ。

あなたは、その違いを理解していますか?

 

はなこ
ホームページを作成するとき『article』と『section』を使うように決まったんだけど、そもそもどんな感じに使えばいいのかな?
僕も、この間きちんと使うようにって言われたんだけど、使い方がよくわからないんだ。
たろう
はなこ
『article』と『section』の違いについて、まずは理解する必要があるわね。

 

今回は、『article』と『section』の違いについて解説し、意味や使い方をチェックします。

スポンサーリンク

【HTML5】『article』と『section』の意味

まずは、『article』と『section』が誕生した経緯について解説します。

書籍や論文などを見ると、文章は章・節・項などで範囲が区切られていますよね。

『HTML5』より前の規定では、そのような概念がありませんでした。

そのため、通常は<h1><h2><h3>といった見出しタグを使って、章・節・項といった階層を表していました。

『article』と『section』は、

文章の階層構造を表すタグ

として新たに導入されたものです。

 

『article』とは?

それ自体で自己完結している箇所を表すタグ

になります。

例えば、ブログでの一つの記事は、それ自体で完結していることが多いので、『article』タグで囲むことができます。

<h1>マイ・ブログ</h1>

<p>これはブログです。</p>

<article>

_<h2>記事1</h2>

_<p>

_一つ目の記事です。

_</p>

</article>

<article>

_<h2>記事2</h2>

_<p>

_二つ目の記事です。

_</p>

</article>

とした場合、記事1と記事2は独立しているので『article』タグで囲むことができます。

 

次のような構造になりますね。

マイ・ブログ

これはブログです。

記事1

一つ目の記事です。

記事2

二つ目の記事です。

 

『section』とは?

指定した範囲が章・節・項などであることを表すタグ

になります。

このタグで囲まれた範囲は、章・節・項であることを示すようになります。

例えば、

<h1>タイトル</h1>

<p>これは前置きです。</p>

<section>

_<h2>第1章</h2>

_<p>

_一つ目の章です。

_</p>

</section>

<section>

_<h2>第2章</h2>

_<p>

_二つ目の章です。

_</p>

</section>

というような例の場合、『section』タグによって2つの章に分けられることになります。

次のような構造になりますね。

タイトル

これは前置きです。

第1章

一つ目の章です。

第2章

二つ目の章です。

 

はなこ
『article』も『section』も、見た目は全く変わらないみたいだけど。
結局、何が違うのかよくわからないね。
たろう

 

『article』と『section』の違い

コマンド

コマンド

『article』と『section』の主な違いは次のようになります。

『article』と『section』の違い

  • 『article』は独立した文章を表すためのタグであり、『section』は章・節・項を表すためのタグである。
  • ドキュメントの階層を表すなら『section』、独立した記事を分けるなら『article』を使う。

『article』は、それぞれが独立した記事であるときに、それらを分けるために使うタグです。

しかし、

『section』はドキュメント全体が一つの記事になっている時、その中の段落を分けるために使うタグです。

『section』では、それぞれの階層だけでは内容が伝わらず、すべての『section』を読んで初めて内容が伝わります。

しかし、『article』の場合は個々の記事が独立しているので、一つの『article』を読めば意味が伝わります。

 

実際に具体例を見ていきましょう。

 

『article』と『section』の使い方

『article』は、次のような場合に利用することができるでしょう。

『article』を利用する例

  • ニュース記事のタイトルと要約が一つのページに複数あるとき、それぞれを『article』で囲む。
  • ブログの記事をひとつずつ『article』で囲む。
  • 質問に対する投稿記事をひとつずつ『article』で囲む。

ニュースサイトには、記事のタイトルと要約があって、それをクリックすると本文が閲覧できる仕組みがよくありますよね。

それぞれのニュースは独立しているので、この場合は『article』を利用するのが普通でしょう。

また、ブログの記事もそれぞれが独立した内容であるのが通常ですから、『article』が利用できます。

質問に対して複数の人が回答を投稿するサイトがよくありますよね。

それぞれの回答はやはり独立しているので、『article』が利用できますね。

 

『section』は、次のような場合に利用できます。

『section』を利用する例

  • 論文に対して、章に分けるために『section』タグを使う。
  • アプリケーションのオンライン・マニュアルに対して『section』タグを使う。
  • 複数の章で構成される特集記事のタイトルと要約に対して『section』タグを使う。

論文は、ドキュメント全体を読んで、初めて内容が理解できますよね。

各章だけを読んでも完全には理解できません。

通常は、それぞれの内容が章で分けられているので、この場合は『section』タグのほうがいいですね。

アプリケーションのオンライン・マニュアルの場合、必要な部分だけ読んでも、意味が分かるのが普通ですが、

全体で章分けがされて関連しあっている

ので『section』がいいでしょう。

 

ニュースサイトにある特集記事は、

複数の章で構成されている

場合があります。

このようなときは、『section』タグのほうがいいですね。

 

『article』も『section』も、必ず見出しタグの<h1><h2><h3>が含まれることが推奨されています。

章・節・項や記事には必ずタイトルがありますよね。

ですから、『article』や『section』を使うときは、見出しタグを忘れないようにしましょう。

 

はなこ
使い分けが難しいわね。
表示される内容に変わりはないから、無理に使う必要もないのかもしれないね。

ただ、見出しタグを使うのなら、積極的に『article』や『section』を入れたほうがいいのかな?

たろう

スポンサーリンク

まとめ

今回の違いのポイントを、まとめていきましょう。

ポイント

  • 『article』は、それ自体で自己完結している箇所を表すタグである。
  • 『section』は、指定した範囲が章・節・項などであることを表すタグである。
  • ドキュメントの階層を表すなら『section』、独立した記事を分けるなら『article』を使う。

『article』も『section』も、使い分けが少々難しいタグですね。

しかし、文章の構成が相手に分かる大事なタグなので、積極的に使うようにしましょう。

関連記事

-ITの違い

Copyright© 違いを解説君 , 2020 All Rights Reserved.