【HTML】正確な日時を機械に対して伝える方法

<time>要素を使用することで機械に対して正確な日時を示すことができm

<time>要素とは

<time>要素は日付や時刻、経過時間などを表します。
画面に表示される日時情報は人間が読みやすいようにしつつ、datetimeという属性を使用して正確な日時を機械に対して伝えられます。

使用方法

<time>要素は、以下のように使用します。

<time datetime="2023-10-01T14:30:00">2023年10月1日 14:30</time>

datetime属性

datetime属性は、機械が理解できる形式で情報を提供します。
以下のような書式でなければなりません。

有効な年の文字列

• 2011

有効な月の文字列

• 2011-11

有効な日付の文字列

• 2011-11-18

年のない有効な日付の文字列

• 11-18

有効な週の文字列

• 2011-W47

有効な時刻の文字列

• 14:54
• 14:54:39
• 14:54:39.929

有効なローカル日時の文字列

• 2011-11-18T14:54:39.929
• 2011-11-18 14:54:39.929

有効なグローバル日時の文字列

• 2011-11-18T14:54:39.929Z
• 2011-11-18T14:54:39.929-0400
• 2011-11-18T14:54:39.929-04:00
• 2011-11-18 14:54:39.929Z
• 2011-11-18 14:54:39.929-0400
• 2011-11-18 14:54:39.929-04:00

有効な期間の文字列

• PT4H18M3S

具体例

記事の公開日

<article>
  <h2>新しい技術のトレンド</h2>
  <p>この記事は、<time datetime="2023-10-01">2023年10月1日</time>に公開されました。</p>
</article>

イベントの日付

<section>
  <h2>カンファレンスのお知らせ</h2>
  <p>次回のカンファレンスは、<time datetime="2023-11-15T09:00">2023年11月15日 09:00</time>に開催されます。</p>
</section>

過去の出来事

<aside>
  <h2>歴史的な出来事</h2>
  <p>月面着陸は、<time datetime="1969-07-20">1969年7月20日</time>に行われました。</p>
</aside>

参考