sectionとarticleの決定的な違い
具体的にHTML5のマークアップ例に入る前にsectionとarticleの違いについてキチンと説明しておかねばなるまい。
文章構造を示す上では非常に便利でSEOへの期待も高まるこの２つの要素ですが 違いについて悩むケースが多く、また某参考書では明らかに説明が間違っているものもありました。
そこで、今回はITかあさんのブログを例に、sectionとarticleの違いを説明しておきたいと思います。
ITかあさんトップページ
まずはITかあさんトップページの画像のキャプチャをご覧下さい。
(説明しやすくするために一部はしょってあります。)
特にnavや、asideはそれほど悩みませんね。
どれがarticleなのか
どれがarticleなのかが理解できれば、残りはsectionになりますから、先にarticleから考えましょう。
articleとは『それ単体で完結出来る、独立したもの』なのですが 結局『独立している』ってどういうことなのでしょうか？
お知らせ、新着情報はarticleにしろ
多少見解は分かれるかもしれませんが、お知らせや新着情報は全てarticleにしてOKです。
『お知らせや新着』はそれだけで完結していますよね。
あるブロックを読んでおけば、『それがお知らせや新着であることは理解できる』わけです。
つまり、たとえそこにリンクがあったとしても、リンク先を見なくてもそれが何を表しているかが明確に理解出来る
それがarticleなのです。
ではsectionはどうか
新着やお知らせはarticleでることは分かったけれど、残りの『注目記事』『カテゴリーへのリンク』はどうでしょうか？
新着やお知らせ同様、『注目記事』『カテゴリーへのリンク』は、そこを見ただけで一体どんな記事が書いてあるかはリンク先を見てみないことには分かりません。
それ単体では何を表しているか分からない、リンク先を見て何があるか初めて分かる、
これがsectionなのです。
Twitterってasideじゃないの？
あえてここではTwitterをasideにしませんでした。解説書によっては『Twitterはasideにする』と書いてありますが、それはTwitterの使い方によってsectionなのかarticleなのかasideなのかが分かれます。
例えばブログに関すること、記事の補足をメインにツイートしていればそれはsectionでしょうし、記事の新着ばかりをツイートすればarticleでしょうし、ブログとは全く関係ないことを多くツイートしていればasideになるでしょう。
特定のサイト専用のツイッターであれば、私は必ずしもasideにしてあげる必要はないと思います。
むしろ、特定のサイト専用のTwitterって新着やお知らせばかりをツイートしているように思えますから、articleが適切なのではないかと思います。
ちなみにITかあさんのTwitterはブログとは関係ないツイートが大半ですからasideになります。
ITかあさんsectionとarticleは・・・
と、いうわけでITかあさんのトップページは下の画像のようにsectionとarticleが分けることが出来たわけです。
ブログの記事ページはどうなるか
『なんだ、articleってsectionに比べるとほとんど出現しないんだ。』
と思ったそこのあなた！(そう、そこのあなた！)
これはトップページだとそうなるわけですが、ブログの記事ページになると全然違います。
下に記事のページのキャプチャを用意しました。オレンジ色になっているところはすべてarticleです。
なぜブログの記事部分は全てarticleになるのか
人によってはdivタグでマークアップするかもしれませんが、記事部分はarticleかsectionのどちらかにするとすればarticleになります。
articleは『単体で独立したもの』ですから、ブログの一記事はその記事だけで単体で存在することができるブロックですよね。外部リンクはあるかもしれませんが、
リンク先を見なくても何であるかは記事を読めば分かることです。
コメント全体はarticle
コメント部分は私的にはどっちでもいいと思いますし、divマークアップでもいいと思いますがあえて言うならコメント全体はarticleでいきます。
なぜなら コメントのブロックは、記事に対するコメントであることが一目瞭然で、それ単独で意味が伝わるからです。
sectionとarticle
コンテンツ部分については、大きく分けるとsectionとarticleのどちらかに必ず分類されることがこの記事で理解いただけたと思います。
単独で存在できるならarticleだし、そうでないならsection。
ただ、前回の記事でもあげたようにrole属性というものもありますから、私ならブログの一記事ならdiv要素でマークアップして、role属性で意味を定めてあげるのが
しっくり来るように思えます。
絶対的なマークアップ方法が出てくるのはあと何年かかかりますので見守っていくことにしましょう。