HTML5 Time Tag

The <time> tag is used to specify the time and date in html page. We declare time and date inside the <time> tag using attribute “datetime” for the machine readable. The user readable time is written between the start and end tag of the <time> tag.
As put by the HTML5 specifications:

The time tag represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. [GREGORIAN]

This tag is intended as a way to encode modern dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user’s calendar. ( W3C )

<time> tag is a machine-readable format, so any script or search engine reading your content can understand the date/time of publication. That way you can format it in a nice way for readers without affecting machine readability. It’s covered under microformats which are a good thing.

The Syntax of <time> Tag

<time attributes> body content </time>

Attributes of <time> Tag

  • datetime: It is used to specify the date and time within the time tag.

Browser Support

The <time> tag does not render as anything special in any of the major browsers.

HTML5 Time Tag Example

<!DOCTYPE html>
   <title>time tag</title>
   <p>We have meeting at <time>12:00</time> today.</p>
   <p>There is a birthday party <time datetime="2014-02-23 18:00 ">
          on Sunday at my friend's home.</time>.

Here we are dispalying the date and time using the <time> tag.

Steps for Execution

  • Save this file as time_example.html in your eclipse IDE.
  • Now select this html file, right mouse click and select Run as ->Run on server


When the execution process is completed successfully we will get the following output :


Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share this post with your friends!