18 SEP

HTML <time> Tag

Example

How to define a time and a date:

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime=”2008-02-14 20:00″>Valentines day</time>.</p>

Try it Yourself »

Definition and Usage

The <time> tag defines a human-readable date/time.

This element can also be used to encode dates and times in a machine-readable way so that user agents can offer to add birthday reminders or scheduled events to the user’s calendar, and search engines can produce smarter search results.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<time> 6.0 9.0 4.0 5.0 11.1

Differences Between HTML 4.01 and HTML5

The <time> tag is new in HTML5.

Attributes

Attribute Value Description
datetime datetime Represent a machine-readable date/time of the <time> element

Global Attributes

The <time> tag also supports the Global Attributes in HTML.

Event Attributes

The <time> tag also supports the Event Attributes in HTML.

Related Pages

HTML DOM reference: Time Object

Default CSS Settings

None.

HTML <time> datetime Attribute

 

Example

A time element with a machine-readable datetime attribute:

<p>I have a date on <time datetime=”2017-02-14″>Valentines day</time>.</p>

Try it Yourself »

Definition and Usage

The datetime attribute represent the machine-readable date/time of the <time> element.

Examples of legal dates and times:

Dates:
<time datetime=”1914″>  <!– means the year 1914 –>
<time datetime=”1914-12″>  <!– means December 1914 –>
<time datetime=”1914-12-20″>  <!– means 20 December 1914 –>
<time datetime=”12-20″>  <!– means 20 December any year –>
<time datetime=”1914-W15″>  <!– means week 15 of year 1914 –>

Date and Times:
<time datetime=”1914-12-20T08:00″>  <!– means 20 December 1914 at 8am –>
<time datetime=”1914-12-20 08:00″>  <!– also means 20 December 1914 at 8am –>
<time datetime=”1914-12-20 08:30:45″>  <!– with minutes and seconds –>
<time datetime=”1914-12-20 08:30:45.687″>  <!– with minutes, seconds, and milliseconds –>

Times:
<time datetime=”08:00″>  <!– means 8am –>
<time datetime=”08:00-03:00″>  <!– means 8am in Rio de Janeiro (UTC-3 hours)  –>
<time datetime=”08:00+03:00″>  <!– means 8am in Madagascar (UTC+3 hours)  –>

Durations:
<time datetime=”P2D”>  <!– means a duration of 2 days –>
<time datetime=”PT15H10M”>  <!– means a duration of 15 hours and 10 minutes –>

Browser Support

Attribute
datetime Yes Yes Yes Yes Yes

Differences Between HTML 4.01 and HTML5

The <time> tag is new in HTML5.

Syntax

<time datetime=”YYYY-MM-DDThh:mm:ssTZD“>

Attribute Values

Value Description
YYYY-MM-DDThh:mm:ssTZD

or

PTDHMS

 The date or time being specified. Explanation of components:

  • YYYY – year (e.g. 2011)
  • MM – month (e.g. 01 for January)
  • DD – day of the month (e.g. 08)
  • T or a space – a separator (required if time is also specified)
  • hh – hour (e.g. 22 for 10.00pm)
  • mm – minutes (e.g. 55)
  • ss – seconds (e.g. 03)
  • TZD – Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)
  • P – a prefix for “Period”
  • D – a prefix for “Days”
  • H – a prefix for “Hours”
  • M – a prefix for “Minutes”
  • S – a prefix for “Seconds”

Post Author: Zahid Farid

Related Posts '