セクションの構成2
セクションの構成要素となるのは、header要素ではありません。
footer要素
そこで、紹介するのがfooter要素です。これは、haeder要素と同様に、セクションに関する情報を含むところです。header要素との使い分けが難しいかもしれませんが、そこまで意識することもないでしょう。例えば、著作権表示とか、関連ページへのリンクなどがfooter要素に含まれる例です。他に、セクションの著者というのもありえます。
大抵はセクションの一番最後に置かれますが、最後である必要はなく、他の場所でも構いません。
<article>
<h1>見出し</h1>
<p>本文</p>
<footer>
<p><small>Copyright © 2011 Uhyohyo</small></p>
</footer>
</article>
このようにfooter要素が使われます。もちろん、header要素と両方使っても構いません。
footer要素
要素の種類
フロー・コンテンツ。
子
フロー・コンテンツ。
意味
セクションに付属する情報のグループ。
address要素
さらに、footer要素と一緒に使われることが多いのがaddress要素です。
address要素は、直近のarticle要素に関する情報を表す要素です。この要素は、その記事に関する連絡先情報を表す要素です。
連絡先情報というのは、作者のWebサイトなどが適切なことが多く、実際の住所というのは少ないと思われます。
address要素の連絡先情報は、セクションに付属する情報ですから、footer要素の中に入ることが多いことでしょう。
<article>
<h1>見出し</h1>
<p>本文</p>
<footer>
<address>
<p><a href="http://example.com/">example.com</a></p>
</address>
<p><small>Copyright © 2011 Uhyohyo</small></p>
</footer>
</article>
address要素
要素の種類
フロー・コンテンツ。
子
フロー・コンテンツ。
意味
article要素に対する連絡先情報。
hgroup要素
さらに、今までの2つと関連は薄いですが、セクションに関連する要素をもう1つ紹介します。
それはhgroup要素です。これは、複数の見出しをグループ化してひとつの見出しとして扱うというものです。つまり、hgroup要素が複数の見出しを子に持つ場合、それらをまとめて1つの見出しとして扱います。
よく、見出しに「副題」がついている場合があります。例えば、次のような感じです。
<h1>ラーメン</h1>
<h2>~おいしいラーメンの作り方~</h2>
これらをまとまった1つの見出しとして扱いたいのに、これらをそのまま見出しとして使ってしまうと、h1要素のセクションとh2要素による暗黙のセクションの2つのセクションができてしまいます。
そこで、これらをまとめて1つの見出しとして扱うようにしたのがhgroup要素です。すなわち、次のようにします。
<hgroup>
<h1>ラーメン</h1>
<h2>~おいしいラーメンの作り方~</h2>
</hgroup>
こうすることで、これらの見出しがまとまった1つの見出しとして扱われ、余計なセクションは生じません。ちなみに、見出しの大きさは、hgroupに含まれる見出しのうち最も大きいものと同じになります。この例の場合、h1要素が一番大きいので、このhgroupはh1と同等の大きさの見出しとなります。
hgroup要素
要素の種類
ヘッディング・コンテンツ。
子
h1~h6要素
意味
見出しのグループ。
main要素
最後に、main要素を紹介します。これはHTML5の中でも新しい要素です。このサイトが出来た当時はありませんでした。
main要素は、ある要素の内容のうちメイン部分を表します。特に、header要素やfooter要素とセットで使うと便利です。これら3つを用いることでセクションの内容を整理できます。
連絡先情報というのは、作者のWebサイトなどが適切なことが多く、実際の住所というのは少ないと思われます。
次はheader,main,footerを用いた例です。
<article>
<header>
<h1>見出し</h1>
</header>
<main>
<p>本文1</p>
<p>本文2</p>
<p>本文3</pgt&;
</main>
<footer>
<p><small>Copyright © 2013 Anonymous</small></p>
</footer>
</article>
この例では、articleの中身がまずheader(ヘッダー情報)、次にmain(本文)、最後にfooter(フッター情報)となり内容の流れや区切りが分かりやすくなっています。昔、main要素がなかった頃は、中身がheader,p,p,p,footerというようになり本文がごちゃごちゃしていました。ただし、必ずしもheader,main,footerの流れに従わなくても構いません。headerやfooterではないけどmain要素に入れるのも違うな、と思ったらheaderとmainの間に入れたりすることもできます。とにかくmain要素は、メインだなーと思う部分を入れればいいのです。
main要素
要素の種類
フロー・コンテンツ。
子
フロー・コンテンツ。
意味
コンテンツのメイン部分。