オニオングラタンスープ
の料理教室で教えてもらったレシピを紹介します...
HyperText Markup Language time element.
time要素は、24時間表記の時刻、新暦のグレゴリオ暦における正確な日付を表します。タイムゾーン・オフセットを加えることもできます。この要素は HTML5で新たに導入された要素です。
time要素は、ブラウザやロボットなどから、その時刻を正確に読み取ることができるようにすることを想定して用意された要素です。そのため、曖昧な時点を表すような表現に、この要素を使うことはできません。
time要素のマークアップ例
<time>16:02</time>
<time>16:02:06</time>
<time>2012-09-12</time>
<time>2012-09-12T16:02</time>
<time>2012-09-12T16:02:06</time>
<time>2012-09-12T16:02:06+09:00</time>
time要素のマークアップ例のサンプル
time要素で規定された日時フォーマットは、 のように表されるフォーマットに準拠したものでなければいけません。年月日の区切りには半角ハイフンを、年月日と時刻の区切りには大文字のTを、時分秒の区切りには半角コロンを使い、そしてタイムゾーン・オフセットを加える場合は、+09:00 という形でマークアップしなければいけません。ただし、タイムゾーン・オフセットは、日付と時刻の両方が指定された場合にのみ使うことができます。
前述のマークアップ例のように、時分だけ、時分秒だけ、日付だけ、といった表記も可能です。その組み合わせは、基本的に前述のマークアップ例のいずれかでなければいけません。時間だけ、分だけ、西暦だけ、月だけ、日だけ、といった表現は time要素ではできませんので、注意してください。例えば、月日だけで誕生日をマークアップすることはできません。もし誕生日を time要素でマークアップするなら、西暦も添える必要があります。
以上のように、time要素に datetime属性を指定しない限り、所定のフォーマットで表された日時を入れなければいけません。しかし、現実的に、このようなマークアップができるシーンは限定的と言えるでしょう。やはり日本であれば、 ではなく 2010年9月12日と表現したいところでしょう。
いくらマシン可読であることが目的の要素だとはいえ、前述のサンプルではなかなか使うことができません。そこで、time要素には datetime属性が規定されており、ここにマシン可読なフォーマットの日時情報を指定することができます。
time要素が表す日時は、datetime属性が指定されていれば、それが優先されます。この場合、time要素の中には、それに対応する日時を表すものであれば、何でも入れることができるようになります。
datetime属性のマークアップ例
<time datetime="2013-01-23">今月の23日</time>
<time datetime="1976-11-27">彼の誕生日</time>
<time datetime="19:30">午後7時半</time>
datetime属性のマークアップ例のサンプル
time要素の pubdate属性は論理属性です。この属性を time要素に指定すると、その time要素が表す日時は、直近の親に当たる article要素が表すコンテンツの投稿日時を表すことになります。もし time要素の親に article要素がなければ、ドキュメント全体の投稿日時を表すことになります。
time要素に pubdate属性を指定する場合は、少なくとも年月日を表すようにしなければいけません。時刻しか表さない time要素に、この属性を指定することはできませんので、注意してください。
pubdate属性のマークアップ例
<header>
<h1>厳選レシピ</h1>
<!-- このドキュメント全体の発行日時を表します。 -->
<p><time datetime="2010-03-12" pubdate="pubdate">2010年3月12日</time></p>
</header>
<p>これまで、私がこのレシピブログで書いてきた記事のうち、皆さんに好評だったレシピをピックアップしました。</p>
<article>
<header>
<h2>オニオングラタンスープ</h2>
<!-- この記事の発行日時を表します。 -->
<p><time datetime="2009-02-02" pubdate="pubdate">2009年2月2日</time></p>
</header>
<!-- 発行日時を表しません。 -->
<p><time datetime="2009-02-01">きのう</time>の料理教室で教えてもらったレシピを紹介します...</p>
</article>
<article>
<header>
<h2>ブイヤベース</h2>
<!-- この記事の発行日時を表します。 -->
<p><time datetime="2010-01-17" pubdate="pubdate">2009年1月17日</time></p>
</header>
<!-- 発行日時を表しません。 -->
<p><time datetime="2010-01-17">今日</time>はブイヤベースに挑戦しました...</p>
</article>
：<br />
：
pubdate属性のマークアップ例のサンプル↓
厳選レシピ
これまで、私がこのレシピブログで書いてきた記事のうち、皆さんに好評だったレシピをピックアップしました。
の料理教室で教えてもらったレシピを紹介します...
はブイヤベースに挑戦しました...
このように、pubdate属性を指定した time要素が、どのコンテンツの発行日時を表すのかを理解してください。
pubdate属性を指定した time要素は、同じ article要素の中に 2つ以上入れてはいけません。また、article要素の外でも、pubdate属性を指定した time要素を 2つ以上入れてはいけませんので、注意してください。