Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
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
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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>

ライブデモ

日時の表示

time 要素で人間向けの日時表記と機械可読な datetime を両立。

プレビュー全画面表示

イベント日時

time 要素でイベントのスケジュールを構造化。

プレビュー全画面表示

相対的な日時表現

time 要素で「3日前」「2時間前」等の相対表現にも datetime を付与。

プレビュー全画面表示

実務での使いどころ

  • <time> の活用

    <time> は HTML の要素で、特定の時の区間を表します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。