html5でページ全体を囲う要素はDIV要素

9

11月

2011

html5の新たなタグを勉強していて、ふとページ全体を囲うタグとして適正なタグはどれなんだろう?
と思ったので、調べてみました。

ページ全体を囲う要素とはbodyタグの直下に入るタグのことです。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
   <全体を囲うタグ>
	<header>
		ヘッダー
	</header>
	<section>
		コンテンツ
	</section>
	<footer>
		フッター
	</footer>
   </全体を囲うタグ>
  </body>
</html>

html5ではarticleやsectionタグがあり、特にarticleは「自己完結したものを表す」要素なので、ページを囲う要素として適しているかも、、と思いつつ、
「記事」ではないしな、、と思うこともありました。

HTML 5 Outlinerでアウトラインを確認する

そこで、「HTML 5 Outliner」でhtmlのアウトラインを確認してみました。
このサイトでチェックすると、見出しがセクション階層構造に則して視覚的に表示されます。
ちなみにアウトラインとは、
html内のセクション要素(section,article,nav,aside)で構築された論理構造です。

下記htmlをHTML 5 Outlinerでチェックしてみます。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
	<article>
		<header>
			<h1>site title</h1>
			footer content
		</header>
		<section>
			<h1>content title</h1>
			<section>
				<h1>title1</h1>
			</section>
			<section>
				<h1>title2</h1>
			</section>
		</section>
		<footer>
			footer content
		</footer>
	</article>
  </body>
</html>
<!-- ※html5では見出しランクはセクションに対しすべてh1でも良いし、全体構造に則したランクを付けても良いので、ここではすべてh1とします。 -->

結果は下記になります。

hタグに入れたテキストが階層構造で表示されるのですが、最上位の見出しがhtmlに記述していない「Untitled Section」になっています。

なぜ最上位が「Untitled Section」になるか

セクション要素は常に直近の祖先のセクション、またはセクショニング・ルートのサブセクションになります。
ということは、上の例のarticleはbodyのサブセクションになり、h1「site title」はarticleの見出しとなるので、
bodyの見出しが無いことになります。
そこで暗黙的にbodyの見出しが生成され「Untitled Section」になるということです。

※セクショニング・ルートとは、
自分自身のアウトラインを持つことができる要素です。
セクショニング・ルートを持つ要素はblockquote,body,details,fieldset,figure,tdです。

ページ全体を囲うタグをdivにすると…

上記例のarticleをセクション機能を持たないdivに変えるとh1「site title」がbodyの見出しとなるので「Untitled Section」が消えて、「site title」が最上位の見出しとなります。

結論

このことから、ページ構造としては全体をセクションタグで囲む必要はないということになります。
デザイン上必要なのであれば、セクション機能を持たないdivを使うのがベストではないでしょうか。

見出しとセクションについては、下記ページが参考になりました。
http://www.html5.jp/tag/elements/headings-and-sections.html

 

 


Tags:HTML5

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トラックバック:http://blog.orangemittoo.net/post/html5_wrap/trackback/