＜time要素＞ - 時間

公開日: 2017/02/09

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>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/611/"> <meta charset="utf-8"> <title>【デモ】＜time要素＞ - 時間</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/time/"> </head> <body>

<p>time属性は、時間を表す要素です。</p> <p>私は<time datetime="2016-08">去年の夏</time>、栃木県に旅行に行きました。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>