HTML〈time〉Element - Defining Date and Time for Web Pages

html
Published on June 28, 2018

Use-Cases of this Tutorial

  • You are looking to know the working of the <time> HTML tag.
  • You are looking to know how web crawlers can interpret date and time on your page.

With the progress of time, web pages are expected to be more structured in its code. HTML code is expected to be written in such a way that it becomes easier for machines (like search engines) to read the page and get a good idea of the page. We human beings have vision — we can understand which section of a page represents the header, and which is the footer. But machines can interpret things only through code.

For this very purpose HTML5 introduced many useful tags - <header>, <footer>, <nav> etc. With the help of these tags, a machine can interpret a webpage much better. A machine will obviously know that the content between <header> and </header> is the top header section of the page.

The <time> tag defines date and time in a HTML document. Date and time obviously represent useful and important pieces of information, so the <time> tag is very useful too.

The <time> Tag

The time element holds a date or time or both. The contents within this tag are expected to be in a certain format (discussed in a below section).

<time>2017-10-07</time>

If you need to enter some other normal text inside the tag, you can still add a valid date & time in a datetime attribute. Again, the date & time should be in an expected format.

<time datetime="2017-10-07">happened here</time>

A Practical Example of the Importance of <time> Tag

In Google search results, you must have noticed that it gives the date when the article was updated. Although the exact way is not known, it is said that one of the ways Google finds this by extracting this from a related <time> tag in the page.

The published time of even this article is specified in a <time> tag. This has been specifically added this in the HTML markup of this page so that Google comes to know when this article was published.

Valid Date & Time Formats for the <time> Tag

The contents of the <time> tag (or datetime attribute) is expected to be in a certain format :

  • Valid Year ( YYYY format )

    2016

  • Valid Month & Year ( YYYY-MM format )

    2016-07

  • Valid Date, Month & Year ( YYYY-MM-DD format )

    2016-07-29

  • Date and Month, without year ( MM-DD format )

    07-29

  • Only time

    14:54
    14:54:30
    14:54:30.431

  • Date and Time

    2016-07-29T14:54
    2016-07-29T14:54:30
    2016-07-29T14:54:30.431
    2016-07-29 14:54
    2016-07-29 14:54:30
    2016-07-29 14:54:30.431

  • Date and Time, with timezone

    2016-07-29T14:54Z
    2016-07-29T14:54:30Z
    2016-07-29T14:54:30.431Z
    2016-07-29 14:54Z
    2016-07-29 14:54:30Z
    2016-07-29 14:54:30.431Z
    2016-07-29T14:54-08:00
    2016-07-29T14:54:30-08:00
    2016-07-29T14:54:30.431-08:00
    2016-07-29 14:54-08:00
    2016-07-29 14:54:30+08:00
    2016-07-29 14:54:30.431+08:00

  • Week

    2017-W22

  • Duration

    5h 16m 5s
    PT5H16M5S

Start Using It

If you are not using the time tag in your HTML code, start using it from now on. As the years go by, the importance of this tag will keep on increasing.

In this Tutorial