section要素って何?div要素とどう違うの?

はじめに

閲覧いただきありがとうございます。
なすと申します。

Progateで「HTML & CSS」コースを1周した僕は、ドットインストールで「はじめてのHTML」コースの動画で復習をしていました。
そこで、Progateで一切登場しなかった「section」要素が使われていました。
sectionってなんだ?divとどう違うんだ?と疑問に思ったので、調べてみました。

目次

目次
  • section、div要素の定義
  • 実際にコーディングして確認する
  • まとめ
  • おまけ:article要素

section、div要素の定義

まずそもそもとして、section要素というのはHTML5から登場した要素のようです。
それまではとりあえずdiv要素でidやclass属性を定義して、それをうまい具合に使い分けていたようですが、HTML5では、sectionやheader、footerなどの役割が明確な要素が追加されたことで、わざわざidなどを定義する必要がなくなったとのことです。

では、具体的にsection要素とdiv要素の役割はどんなものなんでしょうか。
調べてみたところ、以下記事が個人的にわかりやすいと思ったのでご紹介します。

section要素の特徴

・章や節といった単位で扱うので、セクション内容を表すh1~h6の見出しが必ず必要になります。
・コンテナ要素ではありませんので、レイアウト目的に使用することはできません。
 スタイリングに都合の良い要素が必要になった場合はdiv要素が推奨されています。

HTML5でサイトをつくろう 『section要素』 / HTML5新要素一覧より引用

上記から考えると、section要素は「見出し+本文」といった文字のみで構成されているブロックに、div要素はブロック要素の配置を行う際に使うのがいいようですね。

では実際に架空のサイトを作ってどうなるのか確認してみます。

実際にコーディングして確認する

section要素を使ったサイトと使っていないサイトを作成してみました。
※以下リンクになっています。

左がsection要素を使わずに作成したサイト、右がsection要素も使って作成したサイトです。

①sectionを使わず作成したサイト
②sectionも使って作成したサイト

変なサイト作ったなという感想はさておき。。。
見た目は全く同じですね。
サイト利用者には全く影響がない要素のようです。
sectionも使って作成したサイトについて、divとsectionのブロックに色を付けしてみました。

divとsectionの構成

メインの記事となる白背景部分は、ブロックのレイアウトを制御(floatやpaddingを設定)、その中に文章ブロックとしてsection要素を配置しています。
作成していて、div要素でとりあえずブロックを作る場合よりも、sectionを使った方がブロックの意味や役割を意識しやすいのではないかと感じました。
またCSSでレイアウトを設定する際も、divに対してはfloatやpaddingなどの配置関連、sectionに対してはfont-sizeやcolorなどの文字に対するものと分けられるの、すっきりしたコードをかけるのではないかとも思います。

まとめ

section要素とdiv要素の違いとしては、section要素は章や節の意味を持つブロックに使う、divはレイアウトを設定するときだけ使うということですね。
今回いろいろと調べてみたことで、その章がどんな意味を持つのかを意識しないとな、と感じています。
これを機に「とりあえず一旦divで囲んどけばいいや…」と思っていた自分とはおさらばします!

ここまで閲覧いただきありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

アーカイブ

カテゴリー