HTML Living Standard/time

time 要素

<time> 要素は、特定の時刻または期間を表すために使用されます。この要素を使用することで、機械と人間の両方にとって意味のある時間情報を提供できます。検索エンジンやアプリケーションは、この要素を利用して日時を解析できます。

概要

• 役割: 日付や時刻、または期間をセマンティックに表現する。
• 特徴:
  • 構造化された時間データを含む。
  • 機械判読可能なフォーマットをサポートするため、datetime 属性が推奨されます。

属性

グローバル属性

<time> 要素は、すべてのグローバル属性をサポートします。

datetime 属性

• 日時データをISO 8601形式で指定します。
• 例: 2025-01-06, 2025-01-06T14:30, P3Y6M4D（期間）。

datetime 属性が省略された場合

要素内のテキストが時間情報として解釈されますが、正確な解析が保証されないため、明確なフォーマットの指定が推奨されます。

使用例

基本的な使用例

次の例では、日付と時刻を表現しています。

<p>イベントの日程は <time datetime="2025-01-06">2025年1月6日</time> です。</p>

ブラウザに表示されるのは「2025年1月6日」ですが、datetime 属性を通じて機械が解釈可能な形式でデータが提供されています。

時間範囲の例

期間を表現する場合は、開始日時と終了日時を別々の<time> 要素で指定します。

<p>プロジェクト期間: <time datetime="2025-01-01">2025年1月1日</time> ～ <time datetime="2025-12-31">2025年12月31日</time></p>

動的な更新の例

JavaScriptを使用して現在時刻を動的に表示する例です。

<p>現在の時刻: <time id="current-time"></time></p>
<script>
  document.getElementById("current-time").textContent = new Date().toLocaleTimeString();
</script>

使用上の注意

1. 正確なフォーマット:

   datetime 属性を指定する際には、ISO 8601形式を使用する必要があります。これにより、データが正確に解釈されます。

2. 視覚表現の工夫:

   ユーザーが見やすい形式で日付や時刻を表示しつつ、datetime 属性で機械可読な形式を提供するのが理想的です。

3. 過剰な使用を避ける:

   <time> 要素は、日付や時刻に関連する情報だけに使用します。一般的なテキストでの装飾目的で使用すべきではありません。

非推奨な例

以下の例では、日付や時刻に関連しない情報に<time> 要素が使用されています。

<p>現在の進捗率は <time>75%</time> です。</p>

この例はセマンティクス的に誤りです。<time> 要素は、日時や期間を表現するために限定的に使用すべきです。

CSSとスタイリング

<time> 要素はデフォルトのスタイリングがないため、CSSでカスタマイズ可能です。

<time datetime="2025-01-06" class="important-date">2025年1月6日</time>

CSS

.important-date {
  color: red;
  font-weight: bold;
}

ベストプラクティス

• 必ずdatetime 属性を指定し、ISO 8601形式を使用します。
• 人間と機械の両方に有益なデータを提供します。
• 日付や時刻を扱う場合のみ使用し、範囲外の内容では使用しないようにします。

まとめ

<time> 要素は、文書内で日付や時刻をセマンティックに表現するための重要な要素です。正しい使用法により、文書のアクセシビリティとデータ解析が向上します。

関連仕様

• Living Standard – time
• MDN Web Docs – time