HTML
この記事では、日時を意味づけて表すHTMLのtime要素と、機械が読み取れる日時の指定方法を説明します。
この記事でわかること
timeが日付・時刻・期間を表す役割- 表示用テキストと
datetimeの分け方 - ISO 8601形式で機械可読な日時を書く方法
The <time> element lets you show dates and times in a human-friendly way while also adding a machine-readable ISO value in datetime, so things like publish dates, deadlines, and yearless birthdays are understood correctly.
time 要素
time は、見た目は「2025年10月29日」みたいな普通の書き方でOKにしつつ、同時に datetime にISO形式を入れて機械にも正しく伝えるための要素で、公開日・締切・誕生日(年なし)などをきちんと表せます。
time 要素とは?
time 要素は、24時間表記の時刻、新暦のグレゴリオ暦における正確な日付を表します。タイムゾーン・オフセットを加えることもできます。この要素は、日付や時刻を機械にも分かる形で扱うために用意されています。
time 要素は、ブラウザやロボットなどから、その時刻を正確に読み取ることができるようにすることを想定して用意された要素です。
datetime を付けない場合は、YYYY-MM-DD や HH:MM(:SS) など決まった形だけが使えます。
でも datetime を付ければ、見た目は日本語のまま(例:「今月の23日」)でも、機械には正確な日時を伝えられます。
HTML
<time>16:02</time>
<time>16:02:06</time>
<time>2012-09-12</time>
<time>2012-09-12T16:02</time>
<time>2012-09-12T16:02:06</time>
<time>2012-09-12T16:02:06+09:00</time>
<time>2012-09-12T16:02:06Z</time>
time要素で規定された日時フォーマットは、 のように表されるフォーマットに準拠したものでなければいけません。年月日の区切りには半角ハイフンを、年月日と時刻の区切りには大文字のTを、時分秒の区切りには半角コロンを使い、そしてタイムゾーン・オフセットを加える場合は、+09:00 という形でマークアップしなければいけません。ただし、タイムゾーン・オフセットは、日付と時刻の両方が指定された場合にのみ使うことができます。
前述のマークアップ例のように、時分だけ、時分秒だけ、日付だけ、といった表記も可能です。その組み合わせは、基本的に前述のマークアップ例のいずれかでなければいけません。
datetime を付けない場合は、書ける形が決まっています。
例えば 2012-09-12(日付)や 16:02:06(時刻)など、ISOのパターンに沿う必要があります。
でも datetime を付ければ、見た目は自由に、日本語で書いてOK です。
機械向けの正しい形だけ datetime に入れておけば、月だけ(YYYY-MM)・週だけ(YYYY-Www)・年なしの誕生日(--MM-DD) も扱えます。
迷ったら 「見た目は自由、意味は datetime」 と覚えておくと安心です。
HTML
<p>請求月:<time datetime="2025-10">2025年10月</time></p>
<p>対象週:<time datetime="2025-W44">2025年 第44週</time></p>
<p>誕生日:<time datetime="--11-27">11月27日</time></p>
以上のように、time要素に datetime属性を指定しない限り、所定のフォーマットで表された日時を入れなければいけません。しかし、現実的に、このようなマークアップができるシーンは限定的と言えるでしょう。やはり日本であれば、 ではなく 2010年9月12日と表現したいところでしょう。
datetime 属性
いくらマシン可読であることが目的の要素だとはいえ、前述のサンプルではなかなか使うことができません。そこで、time要素には datetime属性が規定されており、ここにマシン可読なフォーマットの日時情報を指定することができます。
time要素が表す日時は、datetime属性が指定されていれば、それが優先されます。この場合、time要素の中には、それに対応する日時を表すものであれば、何でも入れることができるようになります。
HTML
<time datetime="2013-01-23">今月の23日</time>
<time datetime="1976-11-27">彼の誕生日</time>
<time datetime="19:30">午後7時半</time>
FAQ
- Q. 日本語で「2025年10月29日」と書きたいです。
- A. 見た目はそのままでOK。
datetime="2025-10-29"を付けましょう。 - Q. 世界共通の時刻にしたいときは?
- A.
Zかオフセットを使います。例:2025-10-29T10:30:00Z(UTC)/+09:00(JST)。 - Q. 誕生日を「11月27日」のように年なしで表したい
- A. 見た目は「11月27日」、
datetime="--11-27"を使うのが定石です。 - Q. 月だけ・週だけでも使える?
- A.
datetime="2025-10"(月)やdatetime="2025-W44"(週)のように書けます。用途が合うときだけ使いましょう。 - Q. pubdate は使いますか?
- A. 使いません(廃止)。公開日は
time datetimeとJSON-LDで扱うのが現代的です。
よくあるエラー早見表
- 機械可読の値がない
- 見た目の日本語だけで書いている。
datetimeを付ける。 - 区切り文字違い
- 日付の区切りがスラッシュなど。ISOではハイフン(
YYYY-MM-DD)。 - T を入れ忘れる
- 日付と時刻の間は大文字の
T。 - 先頭ゼロなし
- 月・日・時などはゼロ埋め(例:
09)。 - JSTを文字で書く
- JST と書くのではなく、
+09:00かZを使う。 - 年なし表現の誤り
- 誕生日を
11-27などと書く。正しくは--11-27。 - pubdateを使う
- 廃止。使わない。公開日は
time datetimeと構造化データで。