定義と使用方
<time>タグは、
機械が読み取れる標準化されたデータ形式の日付や時刻を示します。
このタグによって日付や時刻に関するコンテンツを機械可読な標準形式で明示することで、スクリーンリーダーや検索エンジンなどがコンテンツをより適切に理解し処理できるようになります。
<time>タグのコンテンツには、日付、時刻、タイムゾーンオフセット、期間など限定された範囲でのみ使用できます。つまり、日付や時刻に関連する情報のみを含めることができます。
基本の例
<time>タグを使用しても、ブラウザ上で表示される際に特別な視覚的変化はありません。つまり、通常のテキストと同じように見えますが、内部的には「機械可読な日付・時間データ」として扱われます。そのため、スクリーンリーダーや検索エンジンなどが情報を解釈しやすくなるメリットがあります。
機械が読み取ることのできる標準化された形式の日付や時刻
<time>タグは機械が読み取ることのできる標準化された形式の日付や時刻として記述する必要があります。
機械が読み取ることのできる標準化された形式の日付や時刻とは、datetime属性の有効な値を指し、以下の表に示すいずれかの適切な形式でなければなりません。
有効なdatetime値の形式 | 例 |
|---|---|
| 有効な年の文字列 | 2011（年のみを示す） |
| 有効な年-月の文字列 | 2011-11（年と月を示す） |
| 有効な年-月-日文字列 | 2011-11-18（年、月、日を示す） |
| 有効な月-日文字列 | 11-18（月と日を示す） |
| 有効な週（week）文字列 | 2011-W47（2011年の47週目を意味） |
| 有効な時刻文字列 | 14:54（時刻を示す） 14:54:39（時、分、秒を示す） 14:54:39.929（時、分、秒、ミリ秒を示す） |
| 有効なタイムゾーンオフセット文字列 | Z（UTC（協定世界時、Zero offset）– +00:00と同じ） +0000（UTC基準、時差なし） +00:00（同じくUTC基準、時差なし（可読性向上）） -0800（UTCより8時間遅い → アメリカ太平洋標準時（PST）など） -08:00（上記と同じだが、可読性のためコロン付きバージョン） |
| 有効な現地日時文字列 | 2011-11-18T14:54:39.929（日付と時刻をTで区切って示す） 2011-11-18 14:54:39.929（日付と時刻を空白で区切って示す） |
| 有効な国際日時文字列 （UTC（協定世界時）タイムゾーンを示す） |
2011-11-18T14:54:39.929Z2011-11-18T14:54:39.929-04002011-11-18T14:54:39.929-04:002011-11-18 14:54:39.929Z2011-11-18 14:54:39.929-04002011-11-18 14:54:39.929-04:00 |
| 有効な期間文字列 | PT4H18M3S（時間、分、秒を示す期間を表す） |
有効な構文
次の例は、有効なdatetime値を使用した構文です。
無効な構文
datetime属性の使用
<time>タグは、コンテンツが機械可読でない形式であっても、datetime属性を使用して機械が理解できる標準形式を指定できます。
datetime属性の値として有効なdatetime値の形式を指定すればよいです。
次の例で確認してみましょう。
先に確認した通り、以下の構文は無効です。
しかし、datetime属性の値として有効なdatetime値の形式を指定すれば、有効な構文になります。
このように、datetime属性で機械が読み取れる標準化されたデータ形式の日付や時刻を指定すれば、人に表示するテキストは自由に記述でき、有効な構文となります。
さまざまな例
ブラウザ互換性
| タグと属性 |
デスクトップ Chrome
|
デスクトップデスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
|---|---|---|---|---|
<time>
|
62 | 18 | 22 | 7 |
datetime
|
62 | 18 | 22 | 7 |
仕様書
| 仕様書 | |
|---|---|
<time>
|
HTML Standard #the-time-element |