HTML <time> Tag - Dates and Times

 

Wednesday, August 13, 2014

❰time❱ to display a date or time. ❰time❱ description, syntax, usage, attributes and examples. HTML-5.com is a great guide for web developers. TV Series & Actors and Actresses. Follow TV Series and HTML 5 on Google+.

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <time> Tag in HTML 5

The <time> tag is used to display a time, Gregorian date, or date and time. The time element is one of the phrase elements in HTML.

Date:
is the latest in the year Mardi Gras falls until
Date and time:
Time only:

These are actual working examples of the <time> tag example code below. Hold the cursor over one of the dates or times to see it in action.

back to top

<time> Tag Syntax

<body>
   ...
   ... phrasing content expected ...<time datetime="yyyy-mm-ddThr:mi:ss.fracTZ">... phrasing content ...
   ... phrasing content ...</time>...
   ...
</body>
Rules for coding the HTML time element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. Code the time element where phrasing content is expected.
  2. Begin the time element with a starting <time> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include a datetime attribute with the date and/or time in yyyy-mm-ddThr:mi:ss.fracTZ, yyyy-mm-dd or hr:mi:ss.fracTZ format.
  4. If the time element is the publication date of the document or of an article element that contains it, include a pubdate="pubdate" attribute to indicate that.
  5. Include any other attributes of the <time> tag as appropriate.
  6. Inside the time element, between the starting <time> tag and the ending </time> tag, code the inner HTML phrasing content with the text version of the time.
  7. End the time element with a matching </time> closing tag.
Content Model
Content of the time element

The content of the time element can include HTML comments, text content and only those HTML tags that can be used in phrasing content. It should be the default display format of the date and/or time in the datetime attribute.

back to top

<time> Tag Attributes

Attributes of the <time> tag
global attributes In addition to the local attributes of the <time> tag below, any of the common HTML attributes can also be coded.
datetime machine-readable date and/or time formatted as datetime="yyyy-mm-ddThr:mi:ss.fracTZ for date and time, datetime="yyyy-mm-dd for date only or datetime="hr:mi:ss.fracTZ for time only

The time zone (TZ) can be specified as an offset such as -05:00 for U.S. Eastern Standard Time. For UTC, either +00:00 or simply Z ("Zulu" time) can be used. Do not use -00:00, which in RFC 3339 indicates that the local offset is unknown.

pubdate="pubdate"

back to top

<time> Tag Examples

Examples of the time tag in HTML 5
Date Only
<time xsi:type="xsd:date" datetime="2011-03-08"
title="Mardi Gras (Fat Tuesday), 2011">March 8, 2011</time>
is the latest in the year Mardi Gras falls until
<time xsi:type="xsd:date"
datetime="2011-03-09"
title="Mardi Gras (Fat Tuesday), 2038"
style="cursor: help">March, 2038</time>
Date and Time
<time xsi:type="xsd:dateTime"
datetime="2010-12-31T23:59:59-04:00"
title="One second before midnight, New Years Eve, 2010"
style="cursor: help">12/31/2010 11:59:59 PM EST</time>
Time Only
<time xsi:type="xsd:time"
datetime="12:00:00-05:00"
title="Noon Eastern time"
style="cursor: help">12:00 PM ET</time>

When the cursor hovers over the text for the time element, the cursor: help style changes the cursor to a question mark to indicate that more information is available. After a brief pause, the text in the title attribute is displayed in a pop-up tool tip. See the <time> tag demos above.

back to top

Changes in HTML 5 - <time> Tag

What's new in HTML 5

The <time> tag is one of the new elements in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The <time> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the time element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

back to top

Valid HTML 5