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.