セクションの構成2

セクションの構成要素となるのは、header要素ではありません。

footer要素

そこで、紹介するのがfooter要素です。これは、haeder要素と同様に、セクションに関する情報を含むところです。header要素との使い分けが難しいかもしれませんが、そこまで意識することもないでしょう。例えば、著作権表示とか、関連ページへのリンクなどがfooter要素に含まれる例です。他に、セクションの著者というのもありえます。

大抵はセクションの一番最後に置かれますが、最後である必要はなく、他の場所でも構いません。

<article>
<h1>見出し</h1>
<p>本文</p>
<footer>
  <p><small>Copyright © 2011 Uhyohyo</small></p>
</footer>
</article>

このようにfooter要素が使われます。もちろん、header要素と両方使っても構いません。

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>

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と同等の大きさの見出しとなります。

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要素は、メインだなーと思う部分を入れればいいのです。