Webサイトのメンテをしていて、ふと気になった事がある。
徐々に HTML5 に準拠したサイト造りにしようと考えていたので。
HTML5 で main という要素のタグが使えるようになった。
WebサイトやWebアプリケーションのコンテンツの、ヘッダーやフッターやサイド部分となる従の部分を除く、メインとなる部分を示すタグである。
なおこのタグはドキュメントのアウトラインを区分せず影響を与えない、との事。
となると、
ボディ
ヘッダー
メイン
(サイド)
フッター
という構成に一般的にはなるかと思う。
この構成は問題はない。
しかしボディの直下の子要素にさらに、
例えば CSS の margin: 0 auto; でサイト本体をブラウザの中央に常に寄せる為に、
ボディと同じか一回り小さい、
コンテンツ全体としてのボックス
#wrapper や #container を作ろうとする時、この為のタグは何にするべきなのかと疑問に思った。
(全ての状況においてこのようなコンテンツ全体を表すボックスを作る必要はないかもしれない。)
その時に候補となりそうなのは
div main article section
の四つかと考えた。
結論から言えば、div になると考える。ただあまり納得はいかない。
div
html4 に引き続き、通常通り html5 においても div で問題はない。最も無難だと考える。
しかし HTML5 の文書構造を明確にするという点においては曖昧になる。特に div の位置や記述からブラウザやクローラーが外側の大枠と判断してくれるのなら問題ないのだが。
wrapper や container または content などのタグが欲しい気もする。
ヘッダーやフッターや記事部分などがdivから header footer article になったのはその為もあるのだろうからと考える。
main
main はコンテンツの、従以外の主となる部分を定義するのだから、従を含むコンテンツ全体を main で定義するのはいささか筋違いな感がする。
w3c もそれは推奨していない。
引用：
The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).
w3c.org より
article
article は自身の全体を示す。
main をメインの部分の定義に使い
article でコンテンツ全体を囲む場合、
article nav aside などの下層に main を含む事がw3cにより禁止されているので 、
article はやはりというか、×。
section
section は、上記の main を下層の子要素として使用する事は禁止されていないので問題はなさそうだ。
しかし全てを包括するコンテナ要素ではない、とされている。その時は article 要素を使うべきと。しかしarticle は main との関係上ここでは使えない。
スタイリングの為には div を使えとも書かれている。
コンテンツ全体のボックスを作る事がスタイリングする事なのだとすれば、div がやはり適当かと思える。
要素のコンテンツを構成組織するなら article を使えとも書いてあるものの。
何が article か section かは作者の意図で決まるとも書かれている、
section article はどちらがどちらの親要素に来ても変わらないと聞いていたが、
少なくとも section は見出しを含む部分、まさにセクションごとのボックスのタグとして使うほうが良さそうだ。
というわけで、
この四つの使用方法は幾通りか複数ある、製作者の解釈次第という点を含んでも含まなくとも。とはいえ、その辺りの各タグの関係の解釈が分かりずらいと感じた。
なので 従来通り全体のボックスにはdiv を使うのが良さそうだが、wrapper かcontainer というタグが文書構造を明確にする為にあって欲しいな、と思いました。
main を使いコンテンツ全体をタグで囲む時、
section は X。セクター、部分として使う
main も X。ヘッダーやフッターは入れない方が理に適っている。
article は X。mainを子要素にできないので。
div は ○。
と解釈する。
使い分けとして
メイン部分は、
mainを使う時は
article でなく div でコンテンツ全体を wrapper でとして(次いで container で)囲う。
div 以外は main を含むコンテンツ全体の外枠には使えない。
article を使う時は、
ただそういう時は main を使えと書かれているので、main のほうが良さそうだが、
div で囲い
article を ヘッダーやフッターとは別の、単数または複数の個々の独立したメインとして使う。
いくつかの使用条件や禁止事項を解釈しても、なかなか断定しづらいのだが、概要としては大体の使いどころはこんなところで良さそうだ。
上の候補を試して、見た目の挙動には影響はなかったものの、人間やブラウザやクローラーなどにこちらの意図した記述を正確に伝える為に必要な事なので、
もっと w3c の説明を読み込んでみる所存です。
html5 はこの策定で完成でなくまだまだ進化していくと聞いたので、wrapper のタグを是非とも作って欲しいと希望したい今日この頃です。
※大枠としてはこんなところだと思うが、英文の読み間違いや誤解釈がありましたら、申し訳ありません。
参照元
World Wide Web consortium
http://www.w3c.org をご参照ください。