HTML5

2019.08.28

【HTML5】新しいセクション要素「section」と「article」の違いとは?

「見出しとそれに伴うコンテンツのひとかたまり」のことを「セクション」と呼びます。
HTML5には文書のセクションを意味付けする新要素が追加されており、

section / article / aside / nav

上記4つがこれに該当します、その4つの要素を「セクション要素」と呼びます。
セクション要素は、セクション要素同士を入れ子構造にすることで文書の「アウトライン」を生成し、情報の階層構造を明示する役割を持っています。

今回は定義や使い方がわかりにくいとよく言われている、「section」「article」についてご紹介します。

【section要素】

section要素は「汎用的なセクション」を表す最も基本的な要素です。
単純にひとかたまりの段落として使いたい時はsectionを使います。
意味的に有意義な方法でグループ化されたコンテンツのセクションに適用され、ほとんどの場合見出し要素(hタグ)が必要です。

【article要素】

全てsection要素でよい気もしますが、
「独立した内容ならなるべくarticle使うように」とW3Cの説明にあります。
つまりarticle要素のコンテンツは、『文書からそのセクションだけを取り出しても意味を持つことが可能な、自己完結しているセクション』を意味します。

こちらも、section要素と同じくほとんどの場合見出し要素(hタグ)が必要です。

まずarticleを使えるかどうかを考え、
使えないと判断したらsection、使えるか迷った時もsectionを使うとわかりやすいと思います。

【div要素との違いは?】

div要素は、単体では意味を持たない特殊なタグです。
複数の要素をグループ化させるために使います。
要は、意味的に関係していないコンテンツをまとめる、ということになります。

囲った部分をブロック要素としてまとめて扱うことができるので、CSSを使ったレイアウトで重宝します。

わかりやすくまとめると、
要素内のコンテンツに意味がないのであれば、『div要素』を使い、
意味があるコンテンツで、かつ独立しても成り立つ場合には『article要素』、そうでない場合は『section要素』を使います。

【参考画像】

article要素とsection要素以外にも、HTML5には他にも色んな役割を持ったタグが数多くあります。
正しい文書構造でHTMLをマークアップすることはSEO的にも重要なポイントです。
タグの役割と意味を理解してマークアップできるようになりましょう!

▼▽▼HTML5についての関連記事 ▼▽▼

0

関連記事

  • 2021.04.28

    【HTML5】HTML5からのsmallタグの使い方

    HTML5

  • 2021.04.27

    【HTM5】aタグの基本的な使い方

    HTML5

  • 2021.04.20

    【HTML5】見出しタグの違いと使い方とは?

    HTML5

おすすめ記事

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!