spiqa logo

コーディング

【HTML5】新セクション要素「section」「article」の使い分け

2019.08.28 Wed. コーディング

「見出しとそれに伴うコンテンツのひとかたまり」のことを「セクション」と呼びます。
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的にも重要なポイントです。
タグの役割と意味を理解してマークアップできるようになりましょう!

最新記事

もっと見る≫

カテゴリー

spiqa logo

スピカ

ホームページ制作、LP制作、広告運用はお任せください。
ロゴや名刺などのデザイン制作、また店舗販促物などもお作りします。
お客様の立場、ユーザーの立場の両方に立ち+αの価値を提供し続けます。

制作のご相談はこちらから