HTML datetime属性：正しい理解と使用方法

定義と使用方

datetime属性は
該当要素に機械が読み取れる標準化されたデータ形式の日付や時間を指定します。

この属性は<del>、<ins>、<time>などのタグで使用され、該当するコンテンツに関する日付や時間を機械が読み取れる標準形式で明示することにより、ウェブページの作者やスクリーンリーダー、検索エンジンなどがコンテンツをより正確に理解し処理できるようになります。

基本の例

`datetime`属性の適用要素と用途

datetime属性の適用要素と用途
`<del>`	削除された内容の日付や時間であることを示します。
`<ins>`	追加された内容の日付や時間であることを示します。
`<time>`	機械が読み取れる標準化されたデータ形式の日付や時間であることを示します。

datetime属性は必須の属性ではなく、必要に応じて使用できます。

ユーザーがウェブページを閲覧する際、datetime属性の値は表示されません。しかし、datetime属性を使用することで、該当コンテンツの日付や時間を機械が読み取れる標準形式で明示でき、ウェブページの作成者やスクリーンリーダー、検索エンジンなどがコンテンツをより正確に理解し処理できるようになります。

`datetime`属性の有効な値

datetime属性の値は、機械が読み取れる日付および時間の値です。以下の適切な形式のいずれかである必要があります。

有効な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.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 （時間、分、秒を示す期間を表す）

例

datetime属性が<del>、<ins>、<time>タグでどのように使用されるか、例で確認してみましょう！

`<del>`における`datetime`属性使用例

HTML

<p>
    次の機能は削除されました。
    <del cite="https://example.com/changelog" datetime="2022-11-14">
        削除された機能の履歴.....
    </del>
</p>

この例では、datetime属性が<del>タグで削除された内容の日付や時刻を指定しています。

`<ins>`における`datetime`属性使用例

HTML

<p>
    最新のアップデートに関する説明です。
    <ins cite="https://example.com/changelog" datetime="2022-11-14">
        最新アップデートの履歴.....
    </ins>
</p>

この例では、datetime属性が<ins>タグで追加された内容の日付や時刻を指定しています。

`<time>`における`datetime`属性使用例

この例では、datetime属性が<time>タグの明示的な日付や時刻を指定しています。

仕様書

datetime属性の仕様書
仕様書
`<ins>,<del> datetime`	HTML Standard #attributes-common-to-ins-and-del-elements
`<time> datetime`	HTML Standard #attr-time-datetime

ブラウザ互換性

datetime属性には各要素ごとに次のようなブラウザ互換性があります。

datetime属性のブラウザ互換性
属性	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`<del> datetime`	1	12	1	4
`<ins> datetime`	1	12	1	4
`<time> datetime`	62	18	22	7

参考資料

codingCourses：HTML datetime Attribute – Specifying the Date and Time

定義と使用方

基本の例

datetime属性の適用要素と用途

datetime属性の有効な値

例

<del>におけるdatetime属性使用例

<ins>におけるdatetime属性使用例

<time>におけるdatetime属性使用例

仕様書