Better Date Format with <time> Element

HTMLPosted on

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%.

Usage

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

<time>2017-11-27</time>

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>16:10:20</time>
<time datetime="12:00">Noon</time>

And an example of the combination:

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

Summary

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

Need a web developer? Maybe we can help, get in touch!

Looking for web dev job?
You can check them on Jooble.

To see and write comments, you must allow the related (Disqus) cookies. For more information, please visit our privacy policy page.

Similar Posts

More content in HTML category