Better Date Format with <time> Element

With the <time> HTML5 element we can represent any human-readable date and time to machines and make it more semantic.

The use case with the <time> tag is like any other new HTML5 element; you can make your code more readable for the crawlers. If you use this in a <article> tag, it means your publication date and the search engines displays in the result lists.

It is an inline element, and the support is almost 100%.


The most straightforward usage is to define a generic date format based on ISO 8601 standard.


As you see this definition is not so flexible because you only define one type of mask. To use different formats, we have to apply the datetime attribute with a correct ISO date; inside of the tag, we can set any other display type without any restriction.

<time datetime="2017-11-27">27.11.2017.</time>
<time datetime="2017-11-28">Tomorrow</time>

Mark Time

As I mentioned above, you can also set just time, or you can combine date with time with the T character.

<time datetime="12:00">Noon</time>

And an example of the combination:

<time datetime="2017-12-03T10:30:00">Sunday, 10:30</time>


The <time> element is a simple and great way to upgrade your HTML code with some semantics.