time要素日付や時刻を示す|HTML5/on Note

time要素日付や時刻を示す

2021年11月10日

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

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

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

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

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

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

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

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

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

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

1つずつ説明します。

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

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

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

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

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

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

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

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

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

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