序章

<time>要素はHTML5の新機能です。 時間情報のマークアップが簡単になります。 いくつかのシナリオを調べて、実際に<time>を使用してみましょう。

前提条件

HTML5での時間要素の使用

<time>を使用すると、日付や時刻の情報を、人間と機械の両方にとって理解しやすい形式でマークアップできます。 たとえば、すでに機械可読形式になっている時間をマークアップする場合は、次のように<time>を使用します。

<p>
  Meet me at <time>11:59</time> at the dock.
</p>

または、日付/時刻情報が機械で読み取りできない場合は、datetime属性を使用して次のようにマークアップします。

<p>
  Last updated
  <time datetime="2015-11-03">
    November 3rd 2015
  </time>.
</p>

datetime属性の値は、次のいずれかの形式を取ります。

  • date：YYYY-MM-DD
  • datetime（タイムゾーン付き）：YYYY-MM-DDThh：mm：ss.Z（例：2016-06-30T03：37：56-0800）
  • datetime-local（タイムゾーンなし）：YYYY-MM-DDThh：mm：ss
  • time：hh：mm：ss
  • month：YYYY-MM

これは、新しい<time>要素を使用する方法です。

結論

<time>は、HTML5の重要な新しい要素です。

HTML5マークアップ言語のより包括的なレビューについては、シリーズ「HTMLでWebサイトを構築する方法」を参照してください。