timeで日時を機械可読にする：表示とdatetimeを照合しよう

開催日を「11月8日」と書けば、人は周囲の案内から意味を補えます。しかし、HTMLを読む処理にも同じ解釈を期待するなら、年や時刻の表し方を決めておく必要があります。timeで日時を機械可読にする方法を使い、見える文章と属性の値が同じ予定を指す状態を作りましょう。

題材は架空の「川辺の観察会」です。HTMLの要素と属性を少し書ける人向けに、静的な案内ページを編集します。カレンダー連携や残り時間の計算は作らず、日時の記述と更新時の照合に絞ります。

原稿から「日付だけ」と「開始日時」を取り出す

練習用の確定原稿は「開催日：2026年11月8日」「開始：同日9時30分、日本時間」とします。この二つを同じ意味の文字列へ無理にまとめず、ページで何を伝える欄なのかを先に決めます。

開催日だけを案内する欄なら、値は2026-11-08です。開始する時点も伝える欄なら、今回は2026-11-08T09:30+09:00とします。前半が日付、Tが日付と時刻の区切り、09:30が24時間表記の時刻、末尾がUTCからの時差です。日本時間のこの例では+09:00を使います。

日付しか決まっていないのに、時刻を00:00と補う必要はありません。未定の情報を埋めると、「その日の案内」が「午前0時に始まる案内」へ変わります。元原稿で確認できる精度に合わせて、書式を選ぶのが出発点です。

人が読む文と、処理が読む値を一組にする

timeは日時を表すHTML要素で、datetime属性へ機械向けの値を書けます。MDNのtimeの説明には、日付だけ、時刻だけ、時差を含む日時などの有効な書式が示されています。

表示したい日本語は開始タグと終了タグの間へ置きます。属性を付けても、日本語の文章が自動的に数字の書式へ置き換わるわけではありません。反対に、属性だけを変更しても表示は変わりません。二つは同じ予定を別の形で記したものとして点検します。

HTML標準のtimeの定義でも、datetimeは内容に対応する機械可読表現とされています。属性を省く場合は要素内のテキスト自体が日時の値になるため、日本語の「2026年11月8日」を囲む今回の例ではdatetimeを明記します。

名称と説明の組を並べるdlの使い方とは役割が違います。たとえば「開催日」という項目名の後ろにtimeを置くことはできますが、time自身が項目名との関係を作るわけではありません。

小さな案内ページを保存して、二つの欄を見る

次をobservation.htmlという新しい練習ファイルへ保存し、ブラウザーで開きます。文書全体を含む例なので、既存のページへ試す場合はmain内の内容だけを必要な場所へ移してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>川辺の観察会｜日時の練習</title>
</head>
<body>
  <main>
    <h1>川辺の観察会（架空の練習例）</h1>
    <p>開催日：<time datetime="2026-11-08">2026年11月8日</time></p>
    <p>開始：<time datetime="2026-11-08T09:30+09:00">2026年11月8日 9時30分（日本時間）</time></p>
  </main>
</body>
</html>

画面では日本語の開催日と開始日時が見えれば、この段階の表示は合っています。次に開発者ツールでそれぞれのtimeを選び、datetimeを見ます。画面だけの確認では、属性に古い日時が残っていても見つけられません。

照合メモには「開催日／2026年11月8日／2026-11-08」「開始／2026年11月8日9時30分・日本時間／2026-11-08T09:30+09:00」と書きます。左から欄の意味、見える内容、属性です。原稿と見比べて三つが対応していることを確認してください。

このページには日時を読み取って何かを起動する処理はありません。カレンダーへの登録ボタンが出ないことは、失敗の症状に数えません。要素の意味を付ける作業と、その値を利用する機能は分けて考えます。

表示が正しくても残る、二つの不一致を直す

一つ目は、属性へ2026/11/08と書いてしまう失敗です。画面は変わらないため気付きにくいものの、この値は今回使う日付書式に合いません。年・月・日をハイフンで区切った2026-11-08へ直し、保存後に開き直して属性を確認します。見た目が同じでも修正は必要です。

二つ目は、開始時刻が10時へ変わった際、見える「9時30分」だけを直す失敗です。属性には09:30が残り、画面を読む人と属性を使う処理が違う時刻を受け取ります。元原稿で10時への変更を確かめたうえで、属性も2026-11-08T10:00+09:00へ更新します。再確認では表示と属性を同じ行のメモへ書き直します。

時差も装飾ではありません。日本時間の09:30を記したまま末尾だけZへ替えると、UTCの09:30を意味する別の日時になります。海外向けの表示へ広げる場合も、時差の記号だけを差し替えず、どの時点をどの地域の時刻で伝えるかを先に決めてください。

曖昧な予定には、確定した値を作らない

「来月上旬に開催予定」のように日が未定なら、推測した日をdatetimeへ入れず、まず普通の文章で未定と伝えます。繰り返す営業時間と一回限りの開始日時も別の情報です。今回の時差付き日時を、毎日の開店時刻へそのまま貼り付けると、特定の日の予定になってしまいます。

開催期間の始まりと終わりを記す場合も、この例の日付値へ斜線で二つの日時を連結して期間の値にはしません。開始と終了を別々に示すなど、読者が区別できる文章を考えます。まず一つのtimeが何を表すかを言える形にしましょう。

終了した催しの募集文を残すかは、期限後の案内を整理する記事で扱っています。datetimeが正しいことと、今も募集しているかが正しいことは、別の確認項目です。

延期後の日付と時刻が、表示にも属性にも残るか

練習として、開催日を11月15日、開始を同日10時へ延期した設定にします。最初に元原稿の二項目を書き換え、それからHTMLを更新してください。日付を検索して一括置換するだけで済ませず、時刻も一緒に確認します。

• 開催日欄の表示は「2026年11月15日」、属性は2026-11-15になっている。
• 開始欄の表示は同日10時・日本時間、属性は2026-11-15T10:00+09:00になっている。
• 保存後のページを開き直し、二つの欄に11月8日や9時30分が残っていない。
• 画面幅を狭めても、年・日付・時刻・日本時間の表記が最後まで読める。

この四条件が解答例です。属性の書き方から復習したい場合は、Semantic HTMLの無料レッスンへ進めます。完成メモには表示と属性の両方を残し、次の変更でも同じ組を照合しましょう。