HTMLのdiv, section, article要素についてまとめ

この記事は1分で読めます

自分用メモ

右にくほど、用途がハッキリしている

※参考:HTMLとは?head要素やbody要素、属性について解説

div要素


特に意味を持たない汎用的な要素

divタグ自体に文章構造上の意味はないため、
divだけを使ったコーディングでも問題はない
(ただし、ボキャブラリーが少ない事を指摘される可能性もある)

デザインやレイアウトにおける囲みが必要な場合などに使う
→レイアウトは、「リスト」として書く事はあるのか?

他のどのような要も適当ではない時に、
最後の頼みの綱として使用することを推奨(by W3C)

CSSでターゲットとして利用するために、
コンテンツをグループ化する時に使うのがいい

※参考:CSSの基礎知識。セレクタ、プロパティ、値とは?

section要素


1つの要素内に意味の区切りを設けたい時に使う

section要素の中には、h1〜h6の見出しタグを含める必要がある
(コンテンツが独立して成立しない場合に用いる)

section要素の中には、article要素を複数配置できる

article要素


独立した記事に使う

ページの本文やブログの投稿記事など、その部分の内容だけを
取り出した際にコンテンツとして成り立つ場合に使う
→その中に、いくつかのsection要素を入れ子にして配置する

参照元




 Horic Design
divとsectionとarticleの区別がいまいちつかない | HTML | Horic Design
https://horicdesign.com/html/entry-41.html
HTML5では、実に多くのタグが使えますね。これらタグはただ単にパーツとして使えるばかりではなく、機械に自分のサイトを読んでもらう時...

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。