HTML5学習(2)セクション要素 header、footer、section、nav等
HTML5学習のまとめ【HTML5勉強用ページ-学習記事、お薦めリンク集、お薦め書籍まとめ-】はこちら
前回はheadタグについてでしたが、今回からbodyタグの中身を学習します。
動画の再生や絵の描画等、興味深い新機能が追加されたHTML5ですが、まずはセクション(まとまり)関連の要素についてです。
XHTML1.0ではdivタグでヘッダやフッタを示していましたが、HTML5ではそれが大きく変わっています。
body及びh1〜h6についてはXHTML1.0から引き続き存在する要素のため、説明を省きます。
header
XHTML1.0のときには<div id="header">なんて書き方をしてそこがヘッダであることを示していましたが、HTML5では元からheaderというタグが用意されています。
タイトルやサイト説明等はこのタグの中に入れることになるでしょう。
<hgroup>
<h1>HTML5学習</h1>
<h2>Sample page</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>
</header>
hgroupタグ及びnavタグについては後述致します。
footer
こちらはフッタのために使用します。
著作権表示を入れる等の使い方になるでしょう。
Copyright© 2011 taguchi katan All Rights Reserved.
</footer>
section
HTML5学習においては、セクションという考え方がよく出てきます。
セクションはなにかしらの意味を持った一まとまりの意味です。
sectionタグを使うことによって、そこが一つのセクションだということになります。
たとえば、ナビゲーションの場合はnav、記事の場合はarticleにてセクションを示すのですが、そういった特別な意味を持たない場合はsectionタグを使用することになります。
<h1>HTML5サンプルとは</h1>
<p>HTML5学習のアウトプットとして制作しています。</p>
</section>
注意点として、XHTML1.0の場合はh1タグは一つのみとされていましたが、HTML5では複数使用が行われます。
h1〜h6がそのままページ内における重要度を示すのではなく、セクション内における重要度として扱われるためです。
同じh1でも同じ重みを持つとは限りません。
たとえば
<h1>HTML5サンプル</h1>
<section>
<h1>HTML5サンプルとは</h1>
<p>HTML5学習のアウトプットとして制作しています。</p>
</section>
</section>
上記のコードの場合、一つ目のh1が二つ目のh1より上位の見出しということになります。
一つ目のh1が含まれるsectionの中に二つ目のh1が含まれるsectionがあるからです。
hにつく1〜6の数字及び階層の両方によって重要度が決まります。
nav
ナビゲーションを示すタグです。
リンクをまとめる部分と言うことができますが、リンクであればすべてnavに含めるというものではありません。
すべてのナビゲーションではなく、主要なナビゲーションを示すのに使うタグです。
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>
article
記事を示すタグです。
記事の定義は難しいですが、一つの自己完結したまとまりとされています。
たとえば、blogの記事やコメントは、それぞれが一つずつ完結していますので、articleタグが適切ということになります。
<hgroup>
<h1>HTML5学習</h1>
<h2>Sample page</h2>
</hgroup>
</header>
<article>
<header>
<h1>セクション要素</h1>
<time pubdate datetime="2011-09-09">2011.9.9</time>
</header>
<section>
<h1>sectionタグとは</h1>
<p>sectionタグについて説明します。</p>
</section>
</article>
timeタグについては後述します(日付や時刻を指定するタグです)。
コードを見て気づいた方もいるかもしれませんが、articleの中にheaderが再登場しています。
headerタグはそのセクションにおけるヘッダとして扱われるため、必ずしもページ全体のヘッダとは限りません。
aside
属するセクションの中でメインの内容に関連はしているものの、それほど関連が強くない部分をまとめるのに使われるタグです。
たとえば、blog全体におけるサイドバー、記事の中における補足説明等で使われます。
<header>
<h1>セクション要素</h1>
<time pubdate="2011-09-09">2011.9.9</time>
</header>
<section>
<h1>sectionタグとは</h1>
<p>sectionタグについて説明します。</p>
</section>
<aside>
本記事は制作途中です。
</aside>
</article>
hgroup
HTML5では見出し(hタグ)毎に新たなセクションが始まると解釈されます。
たとえば
<h2>サブタイトル</h2>
XHTML1.0では上記のような書き方でメインタイトルとサブタイトルを示しましたが、HTML5ではh2タグの中身が新たなセクションにおけるメインタイトルのように扱われることになります。
複数の見出しをグループとして扱う際に使うのがhgroupタグです。
<h1>メインタイトル</h1>
<h2>サブタイトル</h2>
</hgroup>
上記のような書き方をすれば、h1タグとh2タグがセットとして扱われることになります。
address
連絡先情報を示すタグです。
footerタグを使わずにaddressタグを使うこと、あるいはその逆もあるかと思います。
質問は<a href="http://twitter.com/#!/katan_t">katan_t</a>まで
</address>
time
日付や時刻を指定するタグです。
セクションを示すタグではないのですが、せっかくコードに出てきましたのでこの場で使用例を記述します。
まずはtime単体で使用する場合の例です。
この場合は日時の記述が定められた書式通りである必要があります。
<time>23:12:49</time>
<time>2011-09-09</time>
<time>2011-09-09T23:12</time>
<time>2011-09-09T23:12:49</time>
<time>2011-09-09T23:12:49+09:00</time>
定められた書式以外で記述したい場合はdatetime属性を使用します。
<time datetime="2011-09-09">今日</time>の出来事
属するセクションの発行日時を示す場合はpubdate属性を使用します。
まとめ
今回のコードを実際に表示するとこちらのようになります(見やすいようにCSSで色分け等の装飾を施しています)。
ファイルのダウンロード
今回の学習内容をまとめたファイル一式はこちらにてダウンロード可能です。