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についての関連記事 ▼▽▼

関連記事

  • 2021.02.26

    【HTML5】SEO対策に効果的なメタタグとは?

    HTML5

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • フォーム作成に役立つ擬似要素と擬似クラス

    2021.01.27

    【CSS】便利でユーザーにもわかりやすいフォーム作成に役立つ擬似要素と擬似クラス

    CSS

    HTML5

おすすめ記事

  • 2019.02.08

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

    CSS

  • 2020.12.19

    PowerPointで目次を簡単に作る方法【スライド内リンクを設定する方法も紹介】

    その他

  • 2019.03.15

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

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design