HTML5から、多くの要素が廃止されその反面多くの要素が追加をされました。
その中でも、コーディングをしていて定義がはっきりしておらずどちらの要素で組むかをすごく迷うものがありますので、これを機会に解説させていただきたいとおもいます。
xhtmlでは、<h1><h2><h3>などの見出により、htmlに階層をもたせていました。
しかし、これでは階層が明確にはなっていないので、「section要素」、「article要素」を使って階層を明確にすることが進められています。
実際は、その違いが分からずに使用していない方も多いと思います。
簡単に言いますと、その部分だけで、ページとして成立をする内容であれば「article要素」を使い、それ以外の内容であれば「section要素」を使います。
要素の使い方の説明を前に、「セクション(section)」という概念の説明からしていきます。
目次／このページでわかること
「セクション(section)」とは
「セクション」という言葉の意味を理解しましょう。
「セクション」とは、仕切り、部分、節、項などのかたまりをいいます。
本には”章” “節” “項”があると思います。
“章” “節” “項”のまとまりのことを「セクション」と例えることができます。
xhtmlのマークアップ
<h1>ジーニアスウェブブログ</h1> <p>ウェブ業界の最新技術やトレンドなどを紹介します。</p> <h2>HTML5の「section」「article要素」の違い解説！</h2> <p> HTML5から、新たに多くの要素が追加されました。<br /> その新要素の中でも特に定義が漠然としていてわかりづらいのが「section要素」と「article要素」です。 </p>
上記は、xhtmlの見出し要素を使ってマークアップした例です。
<h1><h2><h3>などの見出しレベルによって階層をもたせていました。
これではどこまでが一つのセクションであるのか、明確ではありません。
HTML5からの新要素「section要素」と「article要素」を使用することにより階層を明確に示すことができます。
section要素
「section要素」で囲んだ範囲は一つのセクションになります。
具体的にセクションの範囲がどこかを、「section要素」によって示すことができます。
従来の方法でマークアップしたものを、「section要素」を使い表現をするとソースは下記のようになります。
<h1>ジーニアスウェブブログ</h1> <p>HTML5の「section」「article要素」の違い解説！</p> <section> <h1>これだけは絶対！ホームページを公開したら、まずやること6か条</h1> <p> HTML5から、新たに多くの要素が追加されました。<br /> その新要素の中でも特に定義が漠然としていてわかりづらいのが「section要素」と「article要素」です。 </p> </section>
「section要素」を使用してセクションを明確にすると、アウトラインの判別に見出しレベルが必要なくなります。
「section要素」が入れ子関係をしているので、見出しレベルがどのような形であってもセクションの構造は変わらないということになります。
article要素
「article要素」は、先ほど書いた通りその部分だけ切り離しても完結する構成を表します。
つまり、独立したコンテンツとして成り立つ自己完結したものを「article要素」で表現します。
「独立したコンテンツ」とはなんでしょう？
「RSSフィードで読み込こまれた際に1つの記事として成り立っているか」
ニュース記事やブログ記事などがわかりやすい例です。
一つの記事があるとします。
この記事全体は独立したコンテンツなので、「article要素」で表現することができます。
ブログ記事一覧ページなど複数の記事を表示している場合、その一つ一つの記事は独立したコンテンツであるため、これも「article要素」で表現できます。
「article要素」は、独立しているか判断するのはコーダーです、なので判断基準が明確ではないので、人により区切る方法がかわってきます。
より明確な判断方法などが今後出てくる可能性もありますのでその時はまた紹介をしたいと思います。
まとめ
上記にsection要素、article要素の違い、マークアップ方法などを書きましたが、実は特にそのように区切らなくてもhtml5としては成り立ちますので、あまり理解していない、判断に困るという方は無理に使う必要はありませんので、明確に分かるようになってからsection要素、article要素を使ってみてはいかがでしょうか。