【HTML】time 要素で表現できる日付と時刻

time 要素で日時を表現できますが、そのルールは少し複雑です。今回は time 要素の日付フォーマットの詳細と、JavaScript の Date オブジェクトの関係を解説します。

time 要素の基本

time 要素は日時を表す要素です。また、マシンリーダブルな値を埋め込む点が大きな特徴です。

<time datetime="2021-01-08T17:05">2021年1月8日 17時05分</time>

マシンリーダブルな値は datetime 属性にセットします。しかし、time 要素の中身が、datetime 属性に指定するにふさわしいフォーマットの文字列であれば、datetime 属性は不要です。

<time>2021-01-08T17:05</time>

datetime 属性があれば、time 要素は子要素を持つことができます。

<time datetime="2021-01-08T17:05">
  <span class="date">2021年1月8日</span>
  <span class="time">17時05分</span>
</time>

time 要素の基本は以上です。さほど難しくはありません。しかし、datetime 属性に指定可能な値のルールは多岐にわたりますので、一つずつ紹介します。

datetime 属性の値のフォーマット

datetime 属性に指定できる値は、前述のような日付と時刻の組み合わせだけに限りません。日付だけ、時刻だけ、さらに極端な例ならタイムゾーンだけを表現することも可能です。

西暦は 4 桁の数字ですが、"0000" は許されません。必ず 1 以上を表す 4 桁の数値でなければいけません。

期間については少しわかりづらいかもしれませんね。"PH4H18M3S" や "4h 18m 3s" は 4 時間 18 分 3 秒間という意味です。例えば、映画の尺の表現にも使えます。

<p>風と共に去りぬ <time datetime="3h 58m 0s">3時間58分</time></p>

さて、datetime 属性に指定可能な値のすべてのフォーマットを紹介しましたが、非常に多岐にわたります。はたして、これほど多種多様なフォーマットを許して、マシンリーダブルになるのか疑問に思うかもしれません。

しかし、その心配には及びません。WHATWG HTML 仕様には、これらのフォーマットをどのように解析するのかに関するアルゴリズムを定義しています。興味がある方は WHATWG HTML 仕様のアルゴリズムの説明（英語）をご覧ください。

JavaScript での利用

datetime 属性の値は、time 要素のオブジェクトの dateTime プロパティから得ることができます。"T" が大文字ですので注意してください。

<time datetime="2021-01">2021年1月</time>

const time_el = document.querySelector('time');
console.log(time_el.dateTime); // "2021-01"

このように、dateTime プロパティは単に time 要素の datetime 属性にセットされた文字列をそのまま返します。もし datetime 属性がない場合は空文字列を返します。

time 要素が表す日付や時刻を JavaScript で利用したいことがあるでしょう。time 要素のオブジェクトが datetime 属性の値から Date オブジェクトを生成してくれたら便利なのですが、残念ながらそうではありません。

もちろん、すべてのフォーマットを Date オブジェクトに変換できるわけではありませんが、少なくとも年月が存在すれば、Date オブジェクトに変換することができます。以下のフォーマットなら Date オブジェクトに一発で変換できます。

2021-01,
2021-01-08,
2021-01-08T17:05,
2021-01-08 17:05,
2021-01-08T17:05:30,
2021-01-08 17:05:30,
2021-01-08T17:05:30.025,
2021-01-08 17:05:30.025,
2021-01-08T17:05:30+0900

ひとつ具体例を見ましょう。

<time datetime="2021-01">2021年1月</time>

const time_el = document.querySelector('time');
const dt = new Date(time_el.dateTime);
console.log(dt); // "Fri Jan 01 2021 09:00:00 GMT+0900 (日本標準時)"

日付がなければ 1 日として処理されます。また、時刻がなければグリニッジ標準時の 00:00:00 が指定されたものとして処理されます。そのため、日本時間にすると 09:00 になります。

Googleのロボットに対する SEO の効果は？

Google でページを検索すると、ページによっては公開日が表示されることがあります。ネットで time 要素のことを検索すると、その公開日の取得のためにロボットは time 要素を見ているとの記述を見かけることがあります。本当のことは分かりませんが、少なくとも Google 公式には time 要素を見ているとは言っていません。

検索結果のページ公開日に関しては、Google は公式に情報を公開していますので、それを確認しましょう。

• Google 検索セントラル – ウェブページの最適な日付を Google 検索に知らせるには

まとめ

time 要素は、HTML 要素の中でも数少ないマシンリーダブルでセマンティクスがはっきりした数少ない要素の一つです。それゆえにロボットなどが利用しやすいはずです。

マシンリーダブルな要素としては data 要素が挙げられますが、この要素にははっきりとしたセマンティクスはありませんので、ロボットなどが利用するのは難しいかもしれません。将来的に time 要素を積極的に使いたくなるようなケースが生まれてくると良いですね。

現在のところ time 要素を使ったからといって何かメリットがあるわけではありません。しかし、将来的に time 要素をうまく活用してくれるようなロボットなどが出てくることを期待して、筆者は積極的に time 要素を使っています。このささやかな努力が報われるといいのですけどね。

今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。