Time tag in HTML5
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 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 pubdate 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
Fire Fox
