time ... ⁄time

Share it

time intro time browser display time parents - children Local date and time vs. Global date and time time syntax time datetime attribute

HTML5 time element

The time element allows you to mark up times⁄+dates in your HTML5 page. »video

through its optional datetime attribute, users can provide the machine-readable format of the time⁄+date marked up with time element
in the absence of the datetime attribute, the times⁄+dates to be marked up with time element must have a valid time-datetime format
(see ↓ )

Valid time-datetime formats
valid time-datetime formats for:	syntaxes (formats)	examples
year	YYYY	2014
month	YYYY-MM	2015-09
date	YYYY-MM-DD	2014-09-22
date without year	MM-DD	09-22
week	YYYY-Www	2014-W12
time without seconds	hh:mm	19:30
time with seconds	hh:mm:ss	19:30:15
time with seconds and milliseconds	hh:mm:ss.msmsms	19:30:15.456
duration	hhh mmm sss	1h 11m 44s
local date and time with T	YYYY-MM-DDThh:mm:ss.msmsms	2014-12-25T00:00:00.001
local date and time with space	YYYY-MM-DD hh:mm:ss.msmsms	2014-12-25 00:00:00.001
global date and time with T and Z	YYYY-MM-DDThh:mm:ss.msmsmsZ	2014-12-25T00:00:00.001Z
global date and time with space and Z	YYYY-MM-DD hh:mm:ss.msmsmsZ	2014-12-25 00:00:00.001Z
global date and time with T and +	YYYY-MM-DDThh:mm:ss.msmsms+hh:mm	2014-12-25T00:00:00.001+05:00
global date and time with space and +	YYYY-MM-DD hh:mm:ss.msmsms+hh:mm	2014-12-25 00:00:00.001+05:00
global date and time with T and +	YYYY-MM-DDThh:mm:ss.msmsms+hhmm	2014-12-25T00:00:00.001+0500
global date and time with space and +	YYYY-MM-DD hh:mm:ss.msmsms+hhmm	2014-12-25 00:00:00.001+0500
global date and time with T and -	YYYY-MM-DDThh:mm:ss.msmsms-hh:mm	2014-12-25T00:00:00.001-05:00
global date and time with space and -	YYYY-MM-DD hh:mm:ss.msmsms-hh:mm	2014-12-25 00:00:00.001-05:00
global date and time with T and -	YYYY-MM-DDThh:mm:ss.msmsms-hhmm	2014-12-25T00:00:00.001-0500
global date and time with space and -	YYYY-MM-DD hh:mm:ss.msmsms-hhmm	2014-12-25 00:00:00.001-0500
time-zone offset with Z	Z	Z
time-zone offset with GMT ⁄UTC+	+hh:mm or +hhmm	+01:00 or +0100
time-zone offset with GMT ⁄UTC-	-hh:mm or -hhmm	-06:00 or -0600
parts of syntax marked up in green are optional parts of syntax marked up in orange are required

About time

is an optional element
multiple time elements allowed per HTML5 document

Display & support time

display in browser »video

Parents, children time

time nested within elements »time parents
elements nested within time »time children
»examples
»video

Attributes time

required: none
optional: specific attributes, global attributes, event attributes

Warnings

If datetime attribute is absent, the content of the time element must have a valid time-datetime format → no element nested inside time element, just content valid time-datetime format »video

Local date and time vs. global date and time : When Should Each Be Used ? »video

Syntax time

1	<time> ... </time> »video

Attributes and Values time (comma separated)

<time	attribute	=	"attribute_value(s)"	Video	Examples
1. specific attributes
1.	datetime	=	valid time-datetime format	»video	<time datetime="2013-08-09 14:00Z"> ... <⁄time>
	All Specific Attributes
2. global attributes
1.	accesskey	=	keyboard key	»img	<time accesskey="h"> ... </time>
2.	class	=	class name	»html »img	<time class="class_name"> ... </time>
3.	contenteditable	=	"", , true, false	»html	<time contenteditable="true"> ... </time>
4.	contextmenu	=	menu id value	»html	<time contextmenu="menu_id_value"> ... </time>
5.	data-*	=	value	-	<time data-http-error="404"> ... </time>
6.	dir	=	ltr, rtl, auto	»html	<time dir="ltr"> ... </time>
7.	draggable	=	true, , false	»img	<time draggable="false"> ... </time>
8.	dropzone	=	copy, move, link, string:, file:	-	<time dropzone="copy"> ... </time>
9.	hidden	=	"", , hidden	»html »img	<time hidden="hidden"> ... </time>
10.	id	=	id name	»html »img	<time id="unique_id_name"> ... </time>
11.	itemid	=	URL	-	-
12.	itemprop	=	string	»link »a	-
13.	itemref	=	string	-	-
14.	itemscope	=	"", , itemscope	-	-
15.	itemtype	=	absolute URL	-	-
16.	lang	=	language code	»html »head »title »img	<time lang="en"> ... </time>
17.	spellcheck	=	"", , true, false	»html	<time spellcheck="true"> ... </time>
18.	style	=	CSS property:value	»html »img	<time style="color:red"> ... </time>
19.	tabindex	=	integer	»img	<time tabindex="3"> ... </time>
20.	title	=	text	»html »link »style »abbr »dfn »img »meter	<time title="html page"> ... </time>
21.	translate	=	"", yes, no	»html »img	<time translate="yes"> ... </time>
	All Global Attributes
3. global event attributes
1.	onclick	=	script	» list	<element onclick="script" > ...
2.	ondblclick	=	script	» list	<element ondblclick="script" > ...
	All Event Attributes

Video demonstration time element

HTML5 time element: mark up times ⁄+dates

min	video details
00:00	video tutorial: time element
00:05	time element allows you to mark up times or/and dates in your HTML5 document (time element is specific to HTML5)
00:11	each paragraph contains a time or a date or both that can be marked up using time element
00:19	year format: YYYY 2014 marked up with time element
00:31	month format YYYY-MM-DD 2015-09 marked up with time element
00:36	date without year format MM-DD 09-22 marked up with time element
00:41	date format YYYY-MM-DD 2014-09-22 marked up with time element
00:47	week format YYYY-Www 2014-W12 marked up with time element
00:53	time without seconds format hh:mm 19:30 marked up with time element
01:02	time with seconds format hh:mm:ss 19:30:15 marked up with time element
01:07	time with seconds and milliseconds format hh:mm:ss.msmsms 19:30:15.456 marked up with time element
01:12	duration format hhh mmm sss 1h 11m 44s marked up with time element
01:07	local date and time format with T YYYY-MM-DDThh:mm:ss 2013-12-25T00:00:00 marked up with time element
01:21	local date and time format with space YYYY-MM-DD hh:mm:ss 2013-12-25 00:00:00 marked up with time element
01:27	global date and time format with Z YYYY-MM-DDThh:mm:ssZ 2013-10-26T16:00Z marked up with time element
01:32	each date ⁄time has been marked up with time element

For more information about the time element, please see the specs: W3C ⁄ WHATWG