Introduction
HTML 5 is the latest version of HTML that
introduces several new tags. The <time> tag is also a new tag in HTML5. The time
tag defines date, time or date and time both by using this tag in the HTML
document.
Syntax:
The syntax of <time> tag is as:
<time datetime="value"> Text Here</time>
Example
- Date:
- August
30, 2011 is the latest in the year.
- Date and time:
-
- Time only:
-
Attributes
HTML tags can contain one or more attributes. Attributes
are added to a tag to provide the browser with more information about how the
tag should appear or behave. Attributes consist of a name and a value separated
by an equals (=) sign, with the value surrounded by double-quotes.
There are 3 kinds of attributes that you can add to your
HTML tags: Element-specific, global, and event handler content attributes. The
attributes that you can add to this tag are listed below.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Attributes Introduced by
HTML5
Attributes |
Description |
Pubdate |
Specifies that date and
time in the time element is the publication date and time of the document or the nearest ancestor article element. |
datetime |
The datetime attribute
Specifies that the date or time for the time element. This attribute is
used if no date or time is specified in the element's content. |
Global Attributes
The following attributes are standard across all HTML 5 tags.
HTML5
Global Attributes
|
accesskey |
draggable |
style |
class |
hidden |
tabindex |
dir |
spellcheck |
|
contenteditable |
id |
title |
contextmenu |
lang |
|
Event Handler Content Attributes
Here are the standard HTML 5 event handler content
attributes.
onabort |
onerror* |
onmousewheel |
onblur* |
onfocus* |
onpause |
oncanplay |
onformchange |
onplay |
oncanplaythrough |
onforminput |
onplaying |
onchange |
oninput |
onprogress |
onclick |
oninvalid |
onratechange |
oncontextmenu |
onkeydown |
onreadystatechange |
ondblclick |
onkeypress |
onscroll |
ondrag |
onkeyup |
onseeked |
ondragend |
onload* |
onseeking |
ondragenter |
onloadeddata |
onselect |
ondragleave |
onloadedmetadata |
onshow |
ondragover |
onloadstart |
onstalled |
ondragstart |
onmousedown |
onsubmit |
ondrop |
onmousemove |
onsuspend |
ondurationchange |
onmouseout |
ontimeupdate |
onemptied |
onmouseover |
onvolumechange |
onended |
onmouseup |
onwaiting |
For Example
Pubdate attribute
The pub date attribute specifies that the time element
specifies the publication date of the nearest (closest ancestor) of the time
element.
- <!DOCTYPE HTML>
- <html>
- <body>
- <article>
- <time datetime="2011-01-28" pubdate="pubdate" ></time>
- Article Date.
- </article>
- </body>
- </html>
Datetime Attribute
The DateTime attribute Specifies that the date
or time for the time element.
For Example
- <!DOCTYPE HTML>
- <html>
- <body>
- <div>
- <strong>Time:</strong>
- <br />
- <time datetime="2:00:00-05:00">2:00 PM</time>
- </div>
- <div >
- <br />
- Date and Time
- <br />
- <time xsi:type="xsd:dateTime"
- datetime="2011-8-30T23:59:59-04:00">12/31/2010 11:59:59 PM</time>
- <br />
- </div>
- <div >
- <br />
- Date
- <br />
- <time datetime="2011-08-30">August 30, 2011</time>
- <br />
- </div>
- </body>
- </html>
Internet explorer
FireFox