time 要素日時を表す
time 要素は日時を表します。time 要素に datetime 属性がなければ、time 要素の内容が日時として扱われます。その場合、time 要素内はテキストのみとなり、HTML を含めることはできません。また、その日時を表すテキストは、コンピュータによって取り扱える形式である必要があります。
datetime 属性には、コンピュータによって取り扱い可能な日時を表す文字列を指定することができます。
time 要素の仕様
- カテゴリ
- コンテンツモデル
-
- 要素が datetime 属性を持つ場合はフレージング・コンテンツ
- 要素が datetime 属性を持たない場合はテキスト（ただし、妥当な日付時刻値に限る）
- この要素を使用できる文脈
フレージング・コンテンツが期待される場所
- この要素で使用できる属性
詳細説明
コンピュータが取り扱い可能な日時データ
例えば 「2013年6月」 や 「2013年6月24日 16時30分」、あるいは 「昨日」、「今日」 といった日時の記述は、人間には理解できてもコンピュータには理解できません。コンピュータが取り扱える日時データは、下記のような形式になります。
2013年6月 → 2013-06
2013年6月24日 16時30分 → 2013-06-24T16:30
time 要素は、datetime 属性を持たない場合、その内容テキストが日時として扱われますので、HTML 上は下記のように記述しなければなりません。
<time>2013-06</time>
<time>2013-06-24T16:30</time>
しかし、これでは文書内に日時を記述しても今度は人間にとっての可読性が低下しますので、そのような場合には datetime 属性を使用することができます。
datetime 属性
datetime 属性の値としてコンピュータが取り扱い可能な日時データを指定し、time 要素内には通常の文章で日時を記述するように書けば、人間にもコンピュータにも日時を伝えることができます。
<time datetime="2013-06">2013年6月</time>
<time datetime="2013-06-24T16:30">2013年6月24日 16時30分</time>
<time datetime="2013-06-24">昨日は</time>いい天気だったな
日時の記述例
基本的な日時の書式は、ISO 8601 に基づいた書式となりますが、一部、それ以外の書式も認められます。
年月日
yyyy-dd-mm の形式を基本として、yyyy-dd や dd-mm といった記述が可能です。
- 2013年6月：
<time>2013-06</time> - 2013年6月24日：
<time>2013-06-24</time> - 6月20日：
<time>06-20</time>
時刻
hh-mm-ss の形式を基本として、hh-mm といった記述が可能です。
- 14時54分：
<time>14:54</time> - 14時54分39秒：
<time>14:54:39</time> - 14時54分39.929秒：
<time>14:54:39.929</time>
日時 （現地時間）
yyyy-dd-mmThh-mm-ss の形式が基本になりますが、日付けと時刻の区切りは 「T」 ではなく半角スペースでも構いません。
- 2013年6月24日 14時54分：
<time>2013-06-24T14:54</time> - 2013年6月24日 14時54分：
<time>2013-06-24 14:54</time> - 2013年6月24日 14時54分39秒：
<time>2013-06-24T14:54:39</time>
日時 （協定世界時 / UTC）
日時の指定に、タイムゾーンを加えます。日本であれば 「+09:00」（協定世界時 + 9時間） になります。日時が協定世界時に変換されている場合は 「Z」 を加えます。
- 2013年6月24日 14時54分：
<time>2013-06-24T14:54+09:00</time> - 2013年6月24日 14時54分：
<time>2013-06-24 14:54+09:00</time> - 2013年6月24日 14時54分39秒：
<time>2013-06-24T14:54:39+09:00</time> - 2013年6月24日 14時54分39秒（UTC）：
<time>2013-06-24T14:54:39Z</time>
週
yyyy に続けて -W に週番号を続けた形式が基本になります。
- 2013年第46週：
<time>2013-W46</time>
時間
所要時間や経過時間などを表す場合は、単位となる、週（w）、日（d）、時間（h）、分（m）、秒（s） をそれぞれ数字とセットで半角スペース区切りにする書式と、「P」 に続けて、単位となる、日（D）と数字を、「T」 で区切った後に、同じく、単位となる、時間（H）、分（M）、秒（S） をそれぞれ数字とセットで続けて記述する書式を使用できます。
- 1週間+3日と4時間18分3秒：
<time>1w 3d 4h 18m 3s</time> - 1週間+3日と4時間18分3秒：
<time>P10DT4H18M3S</time> - 3日と4時間18分3秒：
<time>3d 4h 18m 3s</time> - 3日と4時間18分3秒：
<time>P3DT4H18M3S</time> - 4時間18分3秒：
<time>4h 18m 3s</time> - 4時間18分3秒：
<time>PT4H18M3S</time>
time 要素のサンプルソース
<dl> <dt>公開日</dt> <dd> <time datetime="2013-06-20T13:49:49+09:00"> 平成25年6月20日 午後1時49分49秒 </time> </dd> <dt>最終更新日</dt> <dd> <time datetime="2013-06-25T09:07:48+09:00"> 平成25年6月25日 午前9時7分48秒 </time> </dd> </dl>
<p> 日本太郎さんの記録は<time datetime="3h 32m 14s">3時間32分14秒</time>でした。 </p>
主要ブラウザの対応
| IE11 | × |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |