<time>日時を示す

<time>タグは、グレゴリオ暦による正確な日付や時刻を示す要素です。 この<time>は、ブラウザや検索エンジンなどのクローラーが確認できるように日付を示すことが主な目的なので、日時を記述する際に必ず<time>を使わなければならないというわけではありません。

またtime要素はdatetime属性を使用することで、相対的な日時を表記することができます。 datetime属性を利用しない場合は、<time>~</time>内に日時を示す文字列を記述する必要があります。

ただしtime要素は、コンピューターが読み取れる書式で日付や時間を記述する必要があります。 そのためdatetime属性を指定しない場合は、<time>~</time>内に記述する日時の内容をdatetime属性と同様の書式にする必要があります。

またpubdate属性を指定すると、そのtime要素は記事の投稿日時(発行日時)を表す事になります。 例えば<article>の子要素となっているtime要素にpubdate属性を指定すると、time要素で指定した日時はその<article>の記事の投稿日時であることを表します。 親要素となる<article>がない場合は、body要素(文書全体)の投稿日時を表します。 ただしbody要素の投稿日時を表す場合は、time要素は1つ以下である必要があります。

HTML5での変更点

time要素はHTML5から追加された要素です。
HTML5.1の場合、コンテンツモデルが変わり、datetime属性がある場合はフレージングコンテンツとなり、ない場合はテキストとなります。

書式

  • <time 属性="値">~</time> ……… 正確な日時を表す

属性

pubdate="" 親要素の<article>、またはbody要素の投稿日時を表す

※最終勧告では削除されています

datetime="" 日時を指定する

日時の書式

時間:分 14:00
時間:分:秒 14:00:10
年-月-日 2016-10-01
年-月-日-時刻 日付と時刻の間をTで区切る、または半角スペースを空けて記述します。
  • 2016-10-05T14:00
  • 2016-10-05T14:00:30
  • 2016-10-05 14:00:30
年-月-日-時刻+タイムゾーン 日本時間は+9:00のため次のようになります。
2016-10-05T14:00+09:00

使用した時の例

datetime属性を指定しない場合は、下記のようにコンピューターが読み取り可能な書式で日時を記述する必要があります

<!-- 24時間表記 -->
<p><time>15:00</time></p>

<!-- 正確な日付 -->
<p><time>2016-05-18</time></p>

<!-- 日付とタイムゾーン(2016年11月23日 14時0分10秒 日本時間(+9:00)) -->
<p><time>2016-11-23T14:00:10+09:00</time></p>

datetime属性を指定する場合は、下記のように相対的な日時表記にする事ができます。

<p><time datetime="15:00">昼寝の時間</time>だけで起きてた</p>
<p><time datetime="2016-01-20">今日</time>隕石が落ちてきた</p>

ブラウザ上の表示例

だけで起きてた

隕石が落ちてきた

対応ブラウザなどのデータ

形式 <time>~</time> カテゴリ フローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~