<time要素> - 時間
公開日:
time属性は、時間を表す要素です。年月や日付、時刻や期間を、ユーザーエージェントが解釈できるようにマークアップできます。
概要
- 名前
- time
- カテゴリー
- Flow content
- Phrasing content
- Palpable content
- 配置できる場所
- Phrasing contentが期待される場所。
- コンテンツモデル
- datetime属性を持つ場合は、Phrasing content。
- datetime属性を持たない場合は、時間を表す定められた形式のテキストノード。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLTimeElement
- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-time-element
属性
datetime
時間を表す、定められた形式のテキストノード。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
基本的な使い方
time要素は、ユーザーエージェントが解釈できるように時間をマークアップする要素です。人間ではなく機械向けの要素です。例えば、次の文章を見て下さい。人間なら「去年の夏」がいつのことかを周りの情報から判断することができますが、機械では判断できません。
HTML
<!-- 機械では「去年の夏」が時間だと理解できないかもしれない -->
<p>私は去年の夏、栃木県に旅行に行きました。</p>
このような場合に有用なのがtime要素です。該当部分を囲ってdatetime属性に時間を指定すれば、文章と時間を紐付けてユーザーエージェントが解釈できるようになります。
HTML
<!-- 機械が「去年の夏=2016-08」だと解釈できる -->
<p>私は<time datetime="2016-08">去年の夏</time>、栃木県に旅行に行きました。</p>
日本語ではあまり機会がないとは思いますが、time要素の中身がそのまま機械が解釈できる形式だったら、datetime属性を指定する必要はありません。
HTML
<!-- 機械が理解できる表記ならdatetime属性は必要ない -->
<p>私は<time>2016-08</time>、栃木県に旅行に行きました。</p>
時間の表記
time要素が表す時間は、機械が理解できる形式で指定する必要があります。その例を紹介します。
年月
2017-08
年月日
2017-08-23
時刻
21:24
21:24:03
日付と時刻
2017-08-23T21:24
2017-08-23T21:24:03
2017-08-23 21:24
2017-08-23 21:24:03
2017-08-23 21:24+09:00
2017-08-23T21:24:03+0900
週
2017-W34
期間
下記はどちらも「4時間18分3秒」という期間を表す表記です。所要時間などをマークアップする時の値として利用できます。
PT4H18M3S
4h 18m 3s
タイムゾーン
+09:00
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<time要素> - 時間</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/time/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>time属性は、時間を表す要素です。</p>
<p>私は<time datetime="2016-08">去年の夏</time>、栃木県に旅行に行きました。</p>
</body>
</html>