datetime属性

time要素のdatetime属性は、機械可読な形式で日付や時間を指定する属性。

ブラウザ対応

構文

<time datetime="機械可読な形式の日時">日時</time>

機械可読な形式の日時

YYYY-MM-DDThh:mm:ssTZD
  • YYYY：年。西暦の４桁で指定する。（ 例： 2001年であれば、2001。 ）
  • MM：月。01～12の２桁で指定する。（ 例： 2月であれば、02。 ）
  • DD：日。01～31の２桁で指定する。（ 例： 3日であれば、03。 ）
  • T：年月日と時間の区切り。（ 例： 2001年2月3日午前4時5分6秒であれば、2001-02-03T04:05:06。 ）
  • hh：時間。00～23の２桁で指定する。（ 例： 午前4時であれば、04。 ）
  • mm：分。00～59の２桁で指定する。（ 例： 5分であれば、05。 ）
  • ss：秒。00～59の２桁で指定する。（ 例： 6秒であれば、06。 ）
  • TZD：タイムゾーン指定子。
    • 協定世界時（UTC）：末尾にZを添える。（ 例： 2001年2月3日午前4時5分6秒であれば、2001-02-03T04:05:06Z。 ）
    • 協定世界時（UTC）以外のタイムゾーン（ローカルタイム）：末尾に±hh:mm、±hhmm、±hhの何れかを添える。（ 例： 日本時間の2001年2月3日午前4時5分6秒であれば、2001-02-03T04:05:06+09:00。 ）

要点

  • time要素にdatetime属性を指定した場合、datetime属性値が、機械可読な形式の日付や時間であることを示す。
  • time要素にdatetime属性を指定した場合、time要素内のテキストが、機械可読な形式の日付や時間である必要はない。
  • time要素にdatetime属性を指定した場合、time要素内に子孫要素を配置できる。

サンプルコード

日付

何年何月
<time datetime="2001-02">２００１年２月</time>
年月日
<time datetime="2001-02-03">２００１年２月３日</time>
何月何日
<time datetime="02-03">２月３日</time>

時間

何時何分
<time datetime="04:05">４時５分</time>
何時何分何秒
午前４時５分６秒
<time datetime="04:05:06">４時５分６秒</time>
午前４時５分６.７８９秒
<time datetime="04:05:06.789">４時５分６.７８９秒</time>
何時何分何秒（タイムゾーン指定あり）
<time datetime="04:05:06+09:00">日本時間の午前４時５分６秒</time>

日時

２００１年２月３日午前４時５分
<time datetime="2001-02-03T04:05">２００１年２月３日午前４時５分</time>

<time datetime="2001-02-03 04:05">２００１年２月３日午前４時５分</time>
日本時間の２００１年２月３日午前４時５分
<time datetime="2001-02-03T04:05+09:00">日本時間の２００１年２月３日午前４時５分</time>

<time datetime="2001-02-03 04:05+09:00">日本時間の２００１年２月３日午前４時５分</time>
２００１年２月３日午前４時５分６秒
<time datetime="2001-02-03T04:05:06">２００１年２月３日午前４時５分</time>

<time datetime="2001-02-03 04:05:06">２００１年２月３日午前４時５分</time>
日本時間の２００１年２月３日午前４時５分６秒
<time datetime="2001-02-03T04:05:06+09:00">日本時間の２００１年２月３日午前４時５分６秒</time>

<time datetime="2001-02-03 04:05:06+09:00">日本時間の２００１年２月３日午前４時５分６秒</time>

サンプル

HTMLソースコード

<p><time datetime="2001-02-03T04:05:06+09:00">日本時間の２００１年２月３日午前４時５分６秒</time></p>

実際の表示