HTML5で時間要素を使用する方法

序章

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

前提条件

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

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サイトを構築する方法」を参照してください。