【HTML🔰】sectionタグいつ使う？divタグじゃなダメなの？

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

divでも動く。でもsectionを使い分けることで意味を持たせられる

TOP以下のコンテンツにAbout-Service-Q&A-Contactという構成のTOPページがあったとする。

この場合、About、Service、Q&A、Contactをそれぞれsectionで囲うことで、一つのサービスのまとまりであることを認識しやすくなる。

<main>
  <section>
    <h2>About</h2>
  </section>

  <section>
    <h2>Service</h2>
  </section>

  <section>
    <h2>Q&A</h2>
  </section>

  <section>
    <h2>Contact</h2>
  </section>
</main>

divでもできるが、視認性・SEOの観点から使い分けると良い。

無理してsectionタグを使わなくてよい場面もある

これは各ページが存在した時である。

例えばContactページがあったとしてContactフォーム一つだけが存在していた場合、このようなケースはsectionタグでまとめる必要はない。

理由はまとまりであるが、一つしかないため敢えてsectionタグでまとめる必要はない。

判断基準としては、

① ここには独立したテーマがある？
↓
② そのテーマを表す見出しがある？
↓
③ そのまとまりを文書構造として区切る意味がある？

ようは見出し(h2)が一つしかないものに関してはsectionタグで無理に囲う必要がない。

sectionタグの他にもある使い分けすると良いタグ

タグ意味・イメージ使う場面
<section>テーマごとのまとまりAbout、Service、Q&Aなど
<article>それ単体で成立するコンテンツブログ記事、ニュース、商品記事など
<header>そのまとまりのヘッダーサイト全体、section、articleなどの冒頭
<footer>そのまとまりのフッターサイト全体、section、articleなどの末尾
<nav>ナビゲーショングローバルナビ、ページ内ナビなど
<main>ページの主役となるコンテンツ基本的に1ページに1つ
<aside>本筋ではない補足コンテンツサイドバー、関連記事など

コメント