SYNCER

SYNCER

<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-05

年月日

2017-05-30

時刻

02:40
02:40:04

日付と時刻

2017-05-30T02:40
2017-05-30T02:40:04

2017-05-30 02:40
2017-05-30 02:40:04

2017-05-30 02:40+09:00
2017-05-30T02:40:04+0900

2017-W22

期間

下記はどちらも「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>までを含めて下さい。

<body> <div id="___body">

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

<style>

</style>

<script>

</script>