37web

Webの知識やMac・iPhoneなどApple製品の便利なアプリなどを紹介

これで安心|html5のarticle要素とsection要素とdiv要素の使い分け

おはようございます。

昨日は子供の運動会があって、天気が良かったのは嬉しいのですが、やり過ぎですよってくらい暑くてしっかり日焼けしました。シャワーが痛い。。

さて、実はお仕事でWeb講師をやっている自分ですが、先日受講生の方に質問を受けた内容を記載してみようと思います。

html5のarticle要素とsection要素とdiv要素の使い分け

色々なサイトでたくさん書いてますが、いまいちピンとこないということでしたので、出来るだけ簡単に書いてみようかなと思います。

div要素

div要素は最も汎用的な要素。別な言い方をすると、特別ではない意味を持っています。関係していないコンテンツをまとめる、ということになります。
div要素内のコンテンツは本質的に無意味なものであるため、多用ぜずに限られた箇所のみに使うというのが本来の使い方のようです。

特別な意味が無いので、どんな場合にでも使っちゃいますよね。。ダメではないと思いますが。

たぶん、普段はこんなふうに書いてしまうのではないかなと思います。

html5要素のマークアップ以前から慣れているとこんなふうに書きますよね。間違っているわけではないので、良いと思います。

section要素

次はsection要素です。

section要素はdiv要素より、目的がはっきりしています。divは特別な意味は持っていませんが、sectionは意味を持っています。グループ化されたコンテンツの一般的なセクションに適用されます。

先ほどのHTML要素にsectionを付け加えると上記のようになります。

news-letter用のsection(1つのグループ)というのを明確にするためにクラスをつけたりする使い方が多いのではないでしょうか。

article要素

article要素はsection要素より、さらに使い方が特定されます。

つまりarticle要素のコンテンツは、article要素だけを切り出した場合、1つのページとして成り立つことが可能であることを意味します。

こんな感じでしょうか。

Blogなどで使い方としては多いと思うのですが、articleとして切り抜いたところは1つのページして独立して意味が成り立つ。さらにarticleの中にsectionを記載して1つの節として塊を書いています。

仮にclassなどをつけなかったにしてもsectionで区切ってあげるとわかりやすいのかなと思います。

他にもsectionの中にarticleを入れ子にしたりとか使い方様々ですが、それはまた次の機会に書いてみようと思います。

-css, HTML, Web制作