HTML5

on Note

time要素 日付や時刻を示す

time要素では、コンピュータが読み取ることのできる形で日付や時刻の情報を提供します。

記事の中で、何かの日付や時刻の情報をユーザに提供することがあります。記事の発行日や更新日などがそれにあたります。

では「コンピュータが読み取ることのできる」とはどういうことか。例えば記事の発行日を示す際、time要素を使った所定の書き方で示しておけば、検索エンジンにも日付情報を提供できるというわけです。

ここでは、コンピュータに日付・時刻情報を提供する為の、time要素の所定の書き方を示します。

time要素の概要

HTML5での分類
フロー・コンテンツ
フレージング・コンテンツ
書式
<time 属性="値">~</time>
指定できる属性
datetime
グローバル属性
子要素にできるもの
フレージング・コンテンツ(ただしtime要素は子要素にできない)

日付・時刻の指定の仕方

time要素で日付や時刻を示す場合、日付・時刻にも書き方があります。その決まった書き方をすることで、機械的に読み取り可能になるわけです。

日付を指定する

日付を指定する場合、年月日で指定する場合や月日だけを指定する場合など色々だと思いますが、それぞれ次のように指定します。

年を指定
2021
年月を指定
2021-07
年月日を指定
2021-07-07
月日を指定
07-07

時刻を指定する

時刻の指定は、分までの指定の場合と秒まで指定する場合があるでしょう。

分まで指定
10:10
秒まで指定
10:10:50

日付と時刻を同時に指定する

日付と時刻を同時に指定したい場合は、日付部分と時刻部分を、半角スペースで区切る方法が1つ。もう1つの方法が、半角スペースの代わりに「T」で区切る方法です。

半角スペースで区切る
2021-07-07 10:10
「T」で区切る
2021-07-07T10:10

日付と時刻の指定は上のようにします。指定した日付や時刻を、time要素でどう使うのかを説明します。

time要素の使い方

time要素の使い方、つまり日付・時刻を示す方法として次の2通りに分かれます。

  • time要素の中で、datetime属性を使って日付・時刻を示す方法。
  • time要素の、コンテンツとして日付・時刻を示す方法。

1つずつ説明します。

datetime属性で指定する

time要素の属性にdatetimeを指定し、その値に、所定の書き方で日付や時刻を指定します。

datetime属性を使って指定すると、time要素のコンテンツでは任意の書き方ができます。例えば何かの開始時間を知らせる内容の時、次のような指定ができます。

<p>○○は<time datetime = "2021-10-10T08:00">午前8時</time>に開始です。</p>

datetime属性で、日付・時刻を所定の方法で示しているので、コンテンツの内容は自由に書けます。これが datetime属性を使わない場合、コンテンツの中で日付・時刻を、所定の書き方で示す必要があります。

time要素のコンテンツで指定する

datetime属性を使わない場合は、所定の書き方で、コンテンツで指定します。

<p>○○は<time>2021-10-10 08:00</time>に開始です。</p>

datetime属性を使わない場合、コンテンツとしてあまり相応しくない内容になってしまいます。

まとめ

time要素の datetime属性で日付や時刻を指定すると、内容を任意に示すことができます。

日付と時刻の両方を示す場合、「2021-07-07 10:10」のようになります。日付だけの指定や時刻だけの指定も可能です。

日付と時刻は、半角スペースか「T」で区切ります。