タイム要素（time）の仕様と使い方

カテゴリ：HTML5編

time要素の概要

time要素は日付や時刻を表す要素で、主に検索エンジンが記事の投稿日時を取得したり、リマインダー機能の実装などを助けます。
文書内の日付や時刻は24時間表記の時刻もしくは先発グレゴリオ暦による正確な日付を表す場合に使用します。

日付や時刻を指定する場合、以下のような定められた書式（datetime値）で指定する必要があります。

datetime値とは：
例えば、データベースでは日付と時刻の情報を格納するデータ型であるdatetime型ではdatetime形式を使用します。 つまりtime要素はデータベースのdatetime型と親和性の高い要素となり、Webページ上で日時を扱う際に有用な要素となります。

datetime値のフォーマット一覧

datetime値のフォーマットは以下のように時刻のみ、日付のみ、日付と時刻の両方、タイムゾーンの指定ありでの記述が可能です。

時刻

<time>12:05</time>

<time>12:05:50</time>

<time>12:05:50.862</time>

日付

<time>2019-06-06</time>

<time>2019-06</time>

<time>06-06</time>

日付と時刻

<time>2019-06-06 12:05:50.862</time>

<time>2019-06-06T12:05:50.862</time>

タイムゾーン指定

<time>2019-06-06 12:05:50.862+09:00</time>

<time>2019-06-06 12:05:50.862+0900</time>

参考：
https://www.w3.org/TR/html5/text-level-semantics.html#the-time-element

一般的な構成例

time要素ではdatetime属性を使用しない場合と使用する場合の両方の記述方法があります。
それぞれの記述方法の違いは以下となります。

datetime属性を使用しない場合

datetime属性を使用しない場合はtime要素のボディ部（コンテンツ部）にはdatetime値で日付もしくは時刻、またはその両方を記述する必要があります。

例）

<p>明日の遠足は<time>08:00</time>に集合です。</p>

datetime属性での指定

datetime属性を使用してdatetime値を指定する場合、time要素のボディ部（コンテンツ部）には任意のテキストを記述することが可能です。
例）

<p>明日の遠足は<time datetime="2019-06-10 08:00">午前8時</time>に集合です。</p>

なお、文書や記事の発行日時を示すpubdate属性は2011年11月に廃止されており、使用する事はできません。

time要素の利点

HTML5より前のバージョンでは日付や時刻を表す専用の要素は存在しなかったため、Webシンジケーションやリマインダーなどのプログラム（機械可読）などから記事の投稿日時や更新日時、イベントの日時などを格納する要素が統一されておらず検出することが困難でした。
time要素を使用してそれらの日時を構成することで、プログラムがその記事の投稿日時等を見つけるのが容易になります。

W3Cによるtime要素の説明

time要素は、24時間制の時刻、または先発グレゴリオ暦の正確な日付のいずれかを表し、オプションで時間とタイムゾーンのオフセットを表します。

この要素は、現代の日付と時刻を機械可読な方法でエンコードする方法として意図されています。例えば、ユーザーエージェントが誕生日のリマインダーや予定されたイベントをユーザーのカレンダーに追加することを申し出ることができます。

公開日時：2019年06月10日 16:52:40