セクションの構成

前回までで、section要素とarticle要素、そしてarticle要素がつくるセクションは独立した記事という特別な意味を持つということを解説しました。

HTML文書はいくつかのセクションで構成されていて、その構造のことをアウトラインといいましたが、今度は1つ1つのセクションに目を向けてみます。すると、1つのセクションの中にも構造というものが見えてきます。

header要素

header要素は、そのセクションの導入部分を表します。目次とか、さらに見出しなどがheader要素に入る例です。具体例はこうです。

<article>
<header>
  <h1>見出し</h1>
  <p>導入の文章</p>
</header>
<p>文章</p>
</article>

この例では、article要素のセクションの内容のうち、見出しと導入の文章がheader要素内に入れられています。header要素はセクショニング・コンテンツではない（新しいセクションを作らない）ので、header要素の中身がarticle要素のセクションから独立しているということはありません。header要素の中も、他と同じくarticle要素のセクションの中身となります。

このheader要素を使うことで、セクションの中身を整理することができます。

time要素

header要素に他に入る情報として、例えばブログや掲示板などの場合、投稿日時というものが挙げられます。

何かを投稿するという場合、大抵投稿されたものは独立した記事なのでarticle要素で表されます。

「日時」を表し、またarticle要素と密接な関係を持つ要素があります。それがtime要素です（ただし、2012年3月の変更により、密接な関係は無くなりましたが、面倒なのでここで紹介します）。

time要素の基本敵な使い方は簡単です。「日時」や「時間」があるとき、それを囲むだけです。

<p>集合時刻は<time>10:00</time>です。</p>

「10:00」がtime要素でマークアップされました。これにより、ブラウザは「10:00」を「単なる文字列」ではなく「時間データ」として扱うことができます。その結果、これを例えば「午前10時」と表示したり、あるいは他の地域の時間に変換したりする機能が可能かもしれません。

しかし、実はあまり使い勝手がよくありません。時:分:秒という形式しか使用できないのです（秒は省略可能）。

だから、例えば次のようにするのは不適切です。

<p>集合時刻は<time>午前10時</time>です。</p>

「午前10時」と書いても、ブラウザはそう認識してくれません。あまり使い勝手が良くないですね。

さらに、time要素は「日付」も表せます。これも時間と同様に書き方が決まっています。それは、西暦-月-日という形です。例えば、2011-02-18というようにします。

日付と時間を組み合わせる

「日付」と「時間」を両方書くこともできますが、その書式は結構複雑です。まず、「日付」を先に書き、次に「時間」を先に書くのですが、その間にあるのはTです。つまり、こんな感じです。

2011-02-18T16:00

間に余計なスペースなどをいれてはいけません。

しかし、これだけで終了ではありません。さらにタイムゾーンを書く必要があります。これは何かというと、要するにどこ時間かです。これは、UTC(世界協定時）が基準となっていて、そこから何時間進んでいるか、あるいは何時間遅れているかで表されます。

日本の場合（日本標準時）は、UTCより9時間進んでいて、これを+09:00と表します。これを後ろに付けるので、こうなります。

2011-02-18T16:00+09:00

また、UTCそのまま（+00:00）の場合は、+00:00と書かずにZと書きます。つまり、2011-02-18T07:00Zということになります。

ちなみに、この書式は基本的にはISO 8601という規格に準拠しています。ところが、最近のHTMLのtime要素では、これを拡張した書式が仕様できます。

たとえば、日付と時刻の間になるTは、半角スペースでもよいことになっています。例えばこうです。

2011-02-18 07:00Z

さて、ここから先は同様にISO 8601を逸脱したものについて解説します。

タイムゾーンだけを表す

前述のタイムゾーンのみを表す記法が認められています。例えばこうです。

日本のタイムゾーンは<time>+09:00</time>だ。

週を表す

例えば2012-W02と書くと、「2012年の第二週目」（1月8日～1月14日の週）を表します。

時間を表す

今まで紹介してきたのは「日付」や「時刻」ですが、実はtime要素は「時間」も表すことができます。

この書式は、まずPから始まります。次に、「日数」を後ろにDをつけて指定します。例えば3日間ならば3Dです。0日ならば省略可能です。

次にTが来ます。そして、次はHを用いて「時間」です。例えば5Hならば5時間です。以下、同様にMが分、Sが秒です。ただし、秒には小数点以下3桁までの小数も利用可能です。H,M,Sは0ならば省略可能です。

例えば、「3日と5時間23分5秒」を表したいならばP3DT5H23M5Sとなります。

もっと短い例ならば、「1時間」ならば日数、分、秒を省略してPT1Hとなります。例えば「0.5秒」ならば、PT0.5Sと書けます。

時間を表す書式はもうひとつあります。こちらのほうが簡単です。

こちらは、W（週）、D（日）、H（時間）、M（分）、S（秒）を組み合わせてつなげるだけです。

例えば上と同じ例の「3日と5時間23分5秒」ならば3d5h23m5sです。この特徴はアルファベットは小文字でもいいという点です。また、上の書式では順番も決まっていますが、こちらの書式では順番は違っても構いません。例えば、23m5h3d5sとしてもよいということです（わかりにくいのであまりやりませんが）。

また、見やすくするためにスペースを入れても構いません。例えば、3d 5h 23m 5sです。これはわかりやすいですね。

上のほうが厳しくて読みづらく、したのほうが簡単な印象です。なぜかというと、上はISO 8601に基づいており、下はHTMLの独自記法だからです。

datetime属性

さて、今まで紹介してきたのは、これではあまり使い勝手がよくありません。文章中で、「私は、<time>2011-02-18T16:00+09:00</time>に～」などと書かれてもさっぱり分かりません。

そこで、datetime属性が登場します。

datetime属性とはtime要素の属性で、この属性がある場合、time要素が表す日時は、その要素の子（中身）の代わりにdatetime属性が使われます。つまり、time要素でマークアップした文字列がどういう日時を表すかを、datetime属性で表すことができるのです。

<p>集合時刻は午前10時です。</p>

この例では、この「午前10時」をtime要素で囲むことはできなかったのでした。「10:00」ならば可能です。それを、次のようにすることができます。

<p>集合時刻は<time datetime="10:00">午前10時</time>です。</p>

こうすることで、time要素でマークアップされた「午前10時」というテキストが表す時間が「10:00」なのであるということをブラウザが認識します。

他にも例えば、文章中で「今日」という単語が登場したとします。おそらく文章が書かれた日なのでしょうが、あとから見てもいつなのか分かりません。

「今日」の代わりに「○年○月○日」と書くと格好が悪いですが、「今日（○年○月○日）」と書いてもあまり見栄えがよくありません。そういう時、time要素とdatetime属性を使うのです。

<p>私は、<time datetime="2011-02-18">今日</time>は家から出ないことにした。</p>

これで、「今日」が「2011年2月18日」であることが分かります。また、例えば、

<p>私は<time datetime="2011-02-18T09:00+09:00">今日</time>、ラーメンを食べた。</p>

のようにすれば、「今日」という言葉だけで、2011年2月18日の朝9時だということまで表せます。