【HTML】time要素の使い方｜datetime属性で日付・時刻を正しくマークアップする

Webページで「2026年6月18日」のような日付や時刻を表示するとき、ただテキストで書くだけでは人間にしか意味が伝わりません。検索エンジンやブラウザなどの機械にも「これは日付・時刻です」と正しく伝えたいときに使うのが <time> 要素です。datetime 属性に機械が読める形式で値を入れることで、画面には自然な日本語を見せつつ、内部では正確な日時として扱えます。この記事では、<time> 要素の基本的な書き方から、datetime 属性に書ける日付・時刻・期間などの形式、記事の公開日やイベント日時といった実践例、そして表示テキストと datetime が食い違ったときの注意点までを、HTML を学び始めた方に向けて解説します。

なぜtime要素が必要なのか

日付や時刻は、人によって書き方がばらばらです。「2026/6/18」「2026年6月18日」「令和8年6月18日」「6月18日」など、同じ日でも見た目はさまざまです。人間ならどれも同じ日だと分かりますが、機械にとっては単なる文字の並びでしかなく、どれが年でどれが月なのかを確実に判断できません。

<time> 要素を使うと、画面に見せる表記はそのままに、datetime 属性へ機械が解釈できる決まった形式の値を添えられます。これにより、検索エンジンが記事の公開日を正確に拾ったり、ブラウザの拡張機能やスクリプトがイベントの日時をカレンダーに登録したりといった処理がしやすくなります。表示は人間向け、datetime は機械向け、という役割分担ができるのが <time> 要素の最大の利点です。

基本の書き方

もっとも基本的な形は、表示したいテキストを <time> で囲み、datetime 属性に機械が読める日付を書く、というものです。日付は「年-月-日」をハイフンでつないだ形式で書きます。

<!-- 画面には「2026年6月18日」、機械には datetime の値が伝わる -->
<p>公開日：<time datetime="2026-06-18">2026年6月18日</time></p>

このように書くと、ブラウザ上の見た目は「公開日：2026年6月18日」と表示され、ふつうのテキストと変わりません。一方で内部的には datetime="2026-06-18" という正規化された日付を持っているため、機械はこれを確実に「2026年6月18日」として解釈できます。表示テキストには「2026年6月18日」でも「6/18」でも好きな表記を使えますが、datetime には後で説明する決まった形式で書く必要があります。

なお、datetime 属性を省略することもできます。その場合は、要素の中身のテキスト自体が正しい日時形式になっていなければなりません。日本語で「2026年6月18日」のように書いている場合は機械が読めないため、原則として datetime 属性を明示するのが安全です。

datetime属性に書ける形式

datetime 属性には、日付だけでなく時刻や年月、期間（時間の長さ）など、さまざまな種類の値を書けます。形式は HTML 仕様で決められており、基本的に ISO 8601 という国際規格に沿った書き方をします。代表的な形式を次の表にまとめます。

日付と時刻を一緒に書くときは、間を大文字の T でつなぎます。2026-06-18T14:30 なら「2026年6月18日の14時30分」という意味です。タイムゾーンを明示したい場合は、末尾に +09:00（日本標準時）のような時差を付けます。協定世界時（UTC）であれば Z を付けて 2026-06-18T05:30Z のように書きます。

期間（duration）は少し特殊で、P から始まる書き方をします。時間部分の前には T を置き、時間は H、分は M、秒は S で表します。たとえば「2時間30分」は PT2H30M、「15分」は PT15M です。所要時間や調理時間などを表すときに使います。

記事の公開日を示す

もっとも多い使い方が、ブログ記事やニュースの公開日・更新日を示すケースです。日付と時刻まで含めて書いておくと、いつ公開されたかが機械にも正確に伝わります。

<article>
  <h1>time要素の使い方</h1>
  <!-- 日時とタイムゾーンを含めて公開日時を示す -->
  <p>
    公開：
    <time datetime="2026-06-18T10:00+09:00">2026年6月18日 10:00</time>
  </p>
</article>

ここでは datetime="2026-06-18T10:00+09:00" として、日付・時刻・タイムゾーンをまとめて指定しています。タイムゾーンを付けておくと、海外から見たときにも何時のことなのかが曖昧になりません。表示テキスト側は「2026年6月18日 10:00」のように、読者が読みやすい日本語表記にしておけば問題ありません。

イベント日時や所要時間を示す

セミナーやイベントの開催日時、レシピの調理時間など、公開日以外にも <time> 要素が活躍する場面はたくさんあります。次の例では、イベントの開始日時と、所要時間（期間）の両方を <time> で表しています。

<p>
  開催日時：
  <time datetime="2026-07-01T13:00">7月1日 13:00</time>
</p>

<p>
  <!-- PT2H は「2時間」という期間を表す -->
  所要時間：<time datetime="PT2H">約2時間</time>
</p>

開催日時は 2026-07-01T13:00 という日付＋時刻の形式、所要時間は PT2H という期間の形式を使っています。同じ <time> 要素でも、datetime に入れる値の種類によって「ある時点」を表したり「時間の長さ」を表したりできるわけです。レシピであれば PT15M で「15分」、長時間のワークショップであれば PT3H30M で「3時間30分」のように書けます。

表示テキストとdatetimeを食い違わせない

<time> 要素でいちばん注意したいのが、画面に見せるテキストと datetime 属性の値がずれてしまうことです。機械は datetime の値を信じて処理するため、ここが間違っていると、表示は正しいのに検索エンジンには別の日付が伝わる、という困った状況になります。

<!-- 悪い例：表示は6月18日なのに datetime は6月8日 -->
<time datetime="2026-06-08">2026年6月18日</time>

<!-- 良い例：表示と datetime が一致している -->
<time datetime="2026-06-18">2026年6月18日</time>

日付を手で書き換えるときは、表示テキストと datetime の両方を必ずそろえて更新しましょう。記事更新時に表示だけ直して datetime を直し忘れる、というのはよくあるミスです。可能であれば、プログラムやテンプレートで同じ日付データから両方を生成するようにしておくと、食い違いを防げます。

datetimeの形式を間違えていないか確認する

datetime 属性は決められた形式でなければ機械に正しく解釈されません。たとえば「2026/06/18」のようにスラッシュで区切ったり、「2026年6月18日」と日本語で書いたりすると、有効な値として扱われません。年月日はハイフン区切りの 2026-06-18、時刻はコロン区切りの 14:30 が正しい形です。

また、月や日は必ず2桁で書きます。6月は 06、1日は 01 のようにゼロを補います。2026-6-8 のように桁が足りないと無効になる点に注意してください。日付と時刻をつなぐ T や、期間を表す P ・ PT も省略できないので、形式どおりに書けているかを見直すことが大切です。

まとめ

<time> 要素は、画面に見せる日時の表記はそのままに、datetime 属性へ機械が読める正確な値を添えるための要素です。datetime には、年月日（2026-06-18）、時刻（14:30）、日付＋時刻（2026-06-18T14:30）、タイムゾーン付き日時、期間（PT2H30M）など、さまざまな形式を書けます。記事の公開日やイベント日時、所要時間などを示すのに役立ち、検索エンジンやブラウザが日時を正しく解釈できるようになります。形式はハイフンやコロンで区切る決まった書き方に従い、表示テキストと datetime の値を食い違わせないことが、正しくマークアップするうえでのいちばんのポイントです。

参考ページ

• <time>: （日付）時刻要素 – HTML | MDN
• datetime 属性 – <time>要素 – HTML | MDN
• HTML で使用される日付と時刻の形式 – HTML | MDN