HTML <time> (日付)時刻要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年10月.
<time> は HTML の要素で、特定の時の区間を表します。datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。
次のうちの一つを表します。
試してみましょう
<p>
ザ・キュアは、<time datetime="2018-07-07">7 月 7 日</time>にロンドンのハイド・パークで結成 40 周年を祝います。
</p>
<p>
コンサートは <time datetime="20:00">20:00</time> に始まり、少なくとも <time datetime="PT2H30M">2 時間 30 分</time>の間、バンドの演奏をお楽しみいただけます。
</p>
time {
font-weight: bold;
}
属性
他のすべての HTML 要素と同様に、この要素はグローバル属性に対応しています。
datetime-
この属性は要素の日付や時刻を表し、下記に示す書式のいずれかでなければなりません。
使用上のメモ
この要素は、機械可読な形式で日付や時刻を表現するためのものです。例えばユーザーエージェントが、ユーザーのカレンダーにイベントの予定情報を提供することに役立てることができます。
この要素はグレゴリオ暦導入前の日付に対して使用するべきではありません(日付の計算で混乱するため)。
datetime 値(機械可読な日時の値)は要素の datetime 属性の値であり、正しい書式(下記参照)でなければなりません。要素に datetime 属性がない場合、子孫要素を持ってはならず、 datetime 値 は要素のテキストの内容になります。
有効な datetime 値
| 説明 | 構文 | 例 |
|---|---|---|
| 有効な月の文字列 | YYYY-MM |
2011-11, 2013-05 |
| 有効な日付の文字列 | YYYY-MM-DD |
1887-12-01 |
| 年のない有効な日付の文字列 | MM-DD |
11-12 |
| 有効な時刻の文字列 |
HH:MMHH:MM:SSHH:MM:SS.mmm
|
23:5912:15:4712:15:52.998
|
| 有効なローカル日時の文字列 |
YYYY-MM-DD HH:MMYYYY-MM-DD HH:MM:SSYYYY-MM-DD HH:MM:SS.mmmYYYY-MM-DDTHH:MMYYYY-MM-DDTHH:MM:SSYYYY-MM-DDTHH:MM:SS.mmm
|
2013-12-25 11:121972-07-25 13:43:071941-03-15 07:06:23.6782013-12-25T11:121972-07-25T13:43:071941-03-15T07:06:23.678
|
| 有効なタイムゾーンオフセット文字列 |
Z+HHMM+HH:MM-HHMM-HH:MM
|
Z+0200+04:30-0300-08:00
|
| 有効なグローバル日時文字列 | 有効な現地日時文字列と、その後に続く有効なタイムゾーンオフセット文字列の任意の組み合わせ |
2013-12-25 11:12+02001972-07-25 13:43:07+04:301941-03-15 07:06:23.678Z2013-12-25T11:12-08:00
|
| 有効な週の文字列 | YYYY-WWW |
2013-W46 |
| 4 桁以上の ASCII 数字 | YYYY |
2013, 0001 |
| 有効な期間の文字列 |
PdDThHmMsSPdDThHmMs.XSPdDThHmMs.XXSPdDThHmMs.XXXSPThHmMsSPThHmMs.XSPThHmMs.XXSPThHmMs.XXXSww dd hh mm ss
|
P12DT7H12M13SP12DT7H12M13.3SP12DT7H12M13.45SP12DT7H12M13.455SPT7H12M13SPT7H12M13.2SPT7H12M13.56SPT7H12M13.999S7d 5h 24m 13s
|
例
>基本的な例
HTML
html
<p>
コンサートは <time datetime="2018-07-07T20:00:00">20:00</time> に始まります。
</p>
結果
datetime の例
HTML
html
<p>
コンサートは <time datetime="2001-05-15T19:00">5 月 15 日</time>に開催されます。
</p>
結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール |
time
|
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLTimeElement |
仕様書
| Specification |
|---|
| HTML> # the-time-element> |
ブラウザーの互換性
関連情報
<data>要素では、他の種類の値を示すことが可能です。