HTML5のタグを整理してみる
今さらですが、HTML5の追加タグについて、解説書やブログ記事など人によって使い方がことなるので、もう一度整理してみることに。
DOCTYPE宣言や文字コード指定、IE旧バージョンやスマホ対応など、<head>タグ内の設定については割愛します。
当方で利用している headタグのテンプレはこちらでご確認を。
まずはややこしいセクショニングのタグについて。
main / article / section / aside
どう組み合わせてもだいたい正常に表示されますが、ブラウザや検索エンジンにページ構成を正しく理解させるためには、正しく使う必要があるらしいです。
main タグ
文字どおりページの主となる記事エリアを囲むタグ。
ひとページの中で１回しか使ってはいけない。
サイト内のページ共通するheader / nav / footer （ロゴを含むヘッダー部やグローバルナビ、コピーライトを記述するフッター部）を含んではいけない。
以前のwrapperブロックの代わりに使ってるサイトや解説書もありますが、正式には以前のコンテンツ囲みの代わりといったとこでしょうか。
articleとsection タグ
これらが一番ややこしい。
articleタグ
独立した記事をariticle要素で囲みます。
ブログなどの各記事をこれで囲めば良いんですね。
sectionタグ
一般的な原則としては、要素のコンテンツがドキュメントのアウトラインで明示的にリストされる場合に限り、section要素が適切である。
セクション（章や節）を表す。
タグ内に見出し（h1〜h2）タグを入れる。
見出しタグがなくても、あるものと解釈される。
は？記事と章って・・・
ブログやニュースの内容は記事だけど、章ってのは書籍でしょ？
そもそもページの性質が違いますよね？？
ブログなどの記事を文節ごとに分けるなら、
articleの中にsectionを子タグで使うことに。
書籍のようなページで、sectionを章立て、articleを各章の内容として使うなら、sectionの中にarticleを子タグで使えば良いってこと？
いろいろ調べてみたらどちらの親子関係でも良いみたいですが。
ではもう次、次！
asideタグ
あまり重要でないコンテンツに使っても良いことになった。たとえば、ブログロール、補助的なナビゲーション、そして、ページに関連するのであれば広告にも使って良いのだ。とりわけ article 要素の中で使うときは、例えば解説など、その記事に関連したコンテンツとするべきだ。
ブログのサイドバーなどに使うんですね。articleの中で使っても良いし、中をsectionで区切っても良いみたいです。
じゃあsectionタグはdivタグの代わりのようかものか。
と思ってたら・・・
divの代わりに使ってはならない。
はぁぁぁ？？？ もう・・・ややこしすぎる！
結論：
（１）メインブロックはmainタグで、サイドブロックはasideタグで。
（２）articleタグはメインブロックの中だけで。
（３）章立てが必要なら親sectionタグ・子articleタグの組合せも可。
（４）articleとasideの中で見出付の区切りが必要ならsectionを使っても可。
（５）その他のセクショニングにはdivタグを。
※main / article / section / aside は無理して使わなくても良い。
サンプルソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5 sample</title> </head> <body> <div id="wrap"> <header> <h1>SITE NAME</h1> </header> <nav> <ul> <li>NANI MENU 1</li> <li>NANI MENU 2</li> <li>NANI MENU 3</li> </ul> </nav> <div id="container"> <main role="main"> <section id="act01"> <h2>Section 1</h2> <article id="news01"> <h3>NEWS TITLE</h3> <p>あああああ</p> </article> <article id="news02"> <h3>NEWS TITLE</h3> <p>あああああ</p> </article> </section> <section id="act02"> <h2>Section 2</h2> <article id="info01"> <h3>INFORMATION TITLE</h3> <p>あああああ</p> </article> <article id="info02"> <h3>INFORMATION TITLE</h3> <p>あああああ</p> </article> </section> </main> <aside id="sidebar"> <ul> <li>BANNER1</li> <li>BANNER２</li> <li>BANNER３</li> </ul> </aside> </div> <footer> <small>© XXXXX All rights reserved.</small> </footer> </div> </body> </html>
コメントはお気軽にどうぞ！