HTML5のtime要素は表示文とdatetime属性の機械可読値を分ける

HTML5のtime要素で「2015年2月25日」と表示する場合は、datetime="2015-02-25"を対応させます。利用者へ見せる日本語と、programが読み取る値を一つの要素で結び付けるためです。

時刻まで示す場合は、その日時が地域の時刻なのか、世界で同じ瞬間を指すのかも決めてください。前者は時間帯なしの日時、後者はUTCまたは時差を含む日時として記述します。

time要素は内容と機械可読値を結び付ける

HTML5 Recommendationのtime要素に関する定義では、time要素の内容と、datetime属性にある機械可読な値を一組として扱います。

<p>公開日：<time datetime="2015-02-25">2015年2月25日</time></p>

画面には「2015年2月25日」と表示されます。datetime属性には、年、月、日の順で2015-02-25を入れます。datetime属性は表示を自動で日本語へ変換する機能ではありません。見える文字はtime要素の内容として書きます。

「二月二十五日」「2/25」「水曜日」などの表示を使う場合でも、何の日付を示すかが同じなら、対応する機械可読値をdatetime属性へ入れられます。表示だけを変えたときに属性値を古いまま残さないことが重要です。

日付と時刻は必要な精度まで書く

datetime属性へ常に秒まで入れる必要はありません。内容が何を示すかに合わせ、必要な精度を選びます。

秒を示していない表示へ、根拠なく秒を補わないでください。日付だけの予定へ時刻を付けると、programが一日のどの時点かを誤って扱う可能性があります。必要な精度と保存しているdataを合わせます。

地域の日時と世界で同じ瞬間を分ける

2015-02-25T14:30のように時間帯を付けない日時は、その地域で使う時刻を示します。店舗の開店時刻や、各地域で同じ時刻に始める行事など、場所ごとの時計を基準にする場合に使えます。

同じ瞬間に始まるonline会議や配信では、時差を含めます。

<p>
  配信開始：
  <time datetime="2015-02-25T14:30+09:00">2月25日 午後2時30分</time>
</p>

+09:00は、UTCとの差を示します。時間帯を省いた値へ、処理側が独自の時間帯を補うと、日付や時刻がずれる場合があります。日時をdataへ保存するときに、地域の時刻を保つのか、世界で同じ瞬間を保つのかを先に決めてください。

会場の営業時間など、地域の規則で時差が変わる予定では、時差だけでなく場所も画面へ表示します。time要素だけでは、どの都市や地域の時計を基準にするかを説明できません。

datetime属性を省くなら内容を有効な値にする

datetime属性を省いた場合は、time要素のtext contentが機械可読値になります。

<p>締切：<time>2015-02-25</time></p>

この書き方では、2015-02-25自体が画面表示と機械可読値を兼ねます。属性を省いたtime要素には、子要素を入れられません。

次のように日本語表記や子要素を使いたい場合は、datetime属性を指定します。

<p>
  締切：
  <time datetime="2015-02-25"><strong>2015年2月25日</strong></time>
</p>

子要素を使えるかどうかと、太字にする必要があるかは別の判断です。上のstrong要素は構文を説明する仮例であり、日付を必ず重要表示にする指定ではありません。

表示文とdatetime属性を一つのdataから作る

CMSで日付を更新するときに、表示文とdatetime属性を別々に手入力すると、一方だけが古いまま残りやすくなります。日付を一つのdataとして保存し、templateで二つの形式へ出力してください。

たとえば、公開日として2015-02-25を保存しているなら、templateは次の二つを同じ値から作ります。

• datetime属性へ入れる2015-02-25
• 画面へ表示する2015年2月25日

時刻を扱う場合は、保存値に時間帯があるかも確認します。表示だけ日本時間へ変換し、datetime属性へ別の瞬間を出さないようにします。記事の公開日時、更新日時、行事の開催日時は用途が違うため、同じfieldへ上書きしません。

template制作を委託する場合は、HTMLだけでなく、元の日付field、保存する時間帯、表示形式、更新者を受け取ります。markupを作る作業を委託しても、どの日時を公開記録とするかという判断はサイト運営者に残ります。

time要素だけで検索表示を保証しない

time要素は、日付や時刻の内容と機械可読値を結び付けるHTMLです。検索結果へ必ず日付を表示する機能や、利用者の地域に合わせて時刻を自動変換する機能ではありません。

検索結果の表示、予定表への取込、JavaScriptによる変換が必要なら、それぞれの仕様と実装を別に確認します。time要素を書いたことを、外部serviceで希望どおり使われたことと混同しないでください。

最初の一手は、公開日または開催日時を一件選び、見えている文字とdatetime属性が同じ日時を示すか確認することです。時刻がある場合は時間帯も確認し、元dataから二つの値を生成できるようにします。