2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
「見出しとそれに伴うコンテンツのひとかたまり」のことを「セクション」と呼びます。
HTML5には文書のセクションを意味付けする新要素が追加されており、
section / article / aside / nav
上記4つがこれに該当します、その4つの要素を「セクション要素」と呼びます。
セクション要素は、セクション要素同士を入れ子構造にすることで文書の「アウトライン」を生成し、情報の階層構造を明示する役割を持っています。
今回は定義や使い方がわかりにくいとよく言われている、「section」「article」についてご紹介します。
目次
section要素は「汎用的なセクション」を表す最も基本的な要素です。
単純にひとかたまりの段落として使いたい時はsectionを使います。
意味的に有意義な方法でグループ化されたコンテンツのセクションに適用され、ほとんどの場合見出し要素(hタグ)が必要です。
全てsection要素でよい気もしますが、
「独立した内容ならなるべくarticle使うように」とW3Cの説明にあります。
つまりarticle要素のコンテンツは、『文書からそのセクションだけを取り出しても意味を持つことが可能な、自己完結しているセクション』を意味します。
こちらも、section要素と同じくほとんどの場合見出し要素(hタグ)が必要です。
まずarticleを使えるかどうかを考え、
使えないと判断したらsection、使えるか迷った時もsectionを使うとわかりやすいと思います。
div要素は、単体では意味を持たない特殊なタグです。
複数の要素をグループ化させるために使います。
要は、意味的に関係していないコンテンツをまとめる、ということになります。
囲った部分をブロック要素としてまとめて扱うことができるので、CSSを使ったレイアウトで重宝します。
わかりやすくまとめると、
要素内のコンテンツに意味がないのであれば、『div要素』を使い、
意味があるコンテンツで、かつ独立しても成り立つ場合には『article要素』、そうでない場合は『section要素』を使います。
article要素とsection要素以外にも、HTML5には他にも色んな役割を持ったタグが数多くあります。
正しい文書構造でHTMLをマークアップすることはSEO的にも重要なポイントです。
タグの役割と意味を理解してマークアップできるようになりましょう!
HTML5についての関連記事はこちら
RECOMMEND
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design