<time>
<time> は HTML の要素で、特定の時の区間を表します。datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。
次のうちの一つを表します。
24 時間制の時刻
グレゴリオ暦の正確な日付 (時刻やタイムゾーンを伴うことも可能)
有効な期間
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 62 | 14 | 22 | 7 | 62 | 4 | |
| HTML 属性 | ||||||
datetime | 62 | 14 | 22 | 7 | 62 | 4 |
| DOM API | ||||||
| HTMLTimeElement インターフェイスは、（継承によって利用できる、通常の HTMLElement インターフェイスのものに加え）、time 要素を操作するための特別なプロパティを提供します。 | 62 | 14 | 22 | 10 | 62 | 10 |
| HTMLTimeElement.dateTime プロパティは文字列で、HTML の datetime 属性を反映し、要素の日付と時刻の値を機械可読な形で保持します。 | 62 | 14 | 22 | 10 | 62 | 10 |
基本構文
HTML
<p>Posted on: <time datetime="2024-03-15">March 15, 2024</time></p>
<p>Event Start: <time datetime="2024-03-15T14:00">2:00 PM</time></p>
<p>Duration: <time datetime="PT2H30M">2 hours 30 minutes</time></p>ライブデモ
datetime. Display
Time element in between for. datetimenotation and mechanismallowread datetime.
プレビュー全画面表示
relative datetimerepresentationation
Time element in "3before""2 timebetweenbefore"equal. relativerepresentationationation to also datetime attach.
プレビュー全画面表示
実務での使いどころ
-
<time> の活用
<time> は HTML の要素で、特定の時の区間を表します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。