divとsectionとarticleの区別がいまいちつかない

HTML5では、実に多くのタグが使えますね。これらタグはただ単にパーツとして使えるばかりではなく、機械に自分のサイトを読んでもらう時に有効です。
なので、divしかつかわないのは、機械に自分のサイトを伝えるボキャブラリーがないことと同義だということです。
そういう自分も宿題でHTMLのテンプレートを作ったが、div divしてるね。といわれたので悔しいので今日はHTML5のタグについて調べる日とします。

article

タグは、独立したコンテンツを示すための要素です。
articleには、ニュースサイトの記事、ブログや掲示板の投稿など、再利用・再配布可能なコンテンツを入れます。

section

セクションとは章や節や項のように、見出しとそれに関する内容というように階層構造(※アウトライン)になる範囲を定義する領域になります

さて、それぞれの要素の意味も解説しましたし、そろそろ本題に入っていきましょう。
これらの要素をどのように区別していけばよいのでしょう。

divとそれ以外の要素の見分け方

HTML5のマークアップ(1) article、section、divの使い分けによると、
divと、article/sectionの区別は簡単なようです。
ある装飾を実現するためのブロック要素にはdivを使えということだそう。
意味のある塊に対してはsection/articleを使いましょう

sectionとarticleの見分け方

どのサイトを調べても、

それだけで、独立して成り立つ内容ならarticle要素を使え

としか書いていません。困りましたね。
しかし、やっとわかりやすい記事を見つけました。
こちらです。
もう悩まない!HTML5の「section要素」と「article要素」の違いについて
ここには、

「RSSフィードで読み込んで、一つの記事として成り立つかどうか。」

で判断すればわかりやすいと書かれています。なるほどgunosyの記事一覧をイメージすればいいんですかね。

他にもHTML5は学ぶことたくさん

caption要素なんて知ってますか??

captionはテーブルのキャプションを示す要素で、tableの中に1つ目の小要素として記述することが出来ます
<table>
<caption>Atlas.jsのプロパティ一覧</caption>
<tr>
    <th>isSmartPhone</th>
    <th>basicConstructor</th>
</tr>

</table>

上のような記述ができて、このテーブルがなんであるかを説明するための要素だそうです。
いや〜HTML5の勉強は果てがないですね。頑張ります。


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →