HTML5, as we all know, brought a myriad of new elements to our front-end development arsenal. Today, we’re focusing on one that tends to be overlooked but can bring great value to your semantic markup and SEO optimisation — the <time> tag.
Introduction to the HTML <time> Tag
The <time> tag is not just any regular HTML element. It is a semantic inline element specifically designed to represent a precise time (24-hour clock) or date on a Gregorian calendar. Not only does it enhance the readability and structured data for users, but it’s also a powerful SEO booster.
How to Show Time in HTML using <time> Tag?
First off, let’s tackle how to display time in your HTML. With the <time> tag, you make your time-related information understandable for both your users and the search engines. Here’s a simple example on how you can represent time:
<p>The meeting will start at <time>15:30</time>.</p>In the example above, you can see the primary function of the <time> tag – encapsulating a time value in a 24-hour format.
A Guide to Coding Date in HTML with <time> Tag
The <time> magic doesn’t stop with just time though; it can efficiently process a date value as well. As professional developers, it is our responsibility to use precise representation for dates, and the <time> tag is there to ensure exactly that.
Here’s an example of how you can include a date:
<p>The conference is on <time datetime="2022-10-21">October 21, 2022</time>.</p>From this example, you’d notice that we have introduced a new attribute — datetime. The datetime attribute aims to ensure the precise machine-readable format of the date or time value.
How to use Date and Time in HTML with <time>?
Sometimes, we want to represent a combination of both date and time. The <time> tag rises to the occasion with grace. An important note, though: when dealing with both date and time, keep in mind the internationally recognised and SEO-friendly ISO 8601 date and time format.
Let’s see how it works:
<p>The webinar starts at <time datetime="2022-10-21T15:30">3:30 PM on October 21, 2022</time>.</p>The "T" in datetime is used as delimiter between the date and time in ISO 8601 format. The browser doesn’t display the datetime attribute, but search engines will index the exact time and date, improving your content’s SEO ratings.
Time Stamp in HTML: The Era of <time>
Time stamp encapsulation in HTML has never been easier, thanks to the <time> tag. With the introduction of the datetime attribute, encapsulating an exact point of time—or even a duration—is a piece of cake. The time tag allows adding a time stamp in a very straightforward way:
<p>This post was published on <time datetime="2022-03-22T14:55:00Z">22nd March 2022 at 14:55 UTC</time>.</p>The "Z" at the end of the datetime indicates that this time is in Coordinated Universal Time (UTC), another key part of the ISO 8601 date and time format.
Insights into the Format of datetime
Working with dates and times, and enabling SEO-friendly markup along the way, is made possible by the ISO 8601 standard, which defines a family of date- and time-related data representations. Here’s a quick summary:
- Date:
YYYY-MM-DD. Ex:"2022-10-21" - Time:
HH:MM:SS. Ex:"15:30:15" - Date and Time:
YYYY-MM-DDTHH:MM:SS. Ex:"2022-10-21T15:30:15" - Date and Time in UTC:
YYYY-MM-DDTHH:MM:SSZ. Ex:"2022-10-21T15:30:15Z"
It’s important to remember that while the datetime value is hidden from users, it is visible to search engines, offering an opportunity to generate better structured data for your website.
Conclusion
The <time> tag might seem small and insignificant, but we’ve seen how it can meaningfully encapsulate time data while simultaneously enhancing your SEO rankings. This tiny tag certainly packs a punch by bridging the gap between human-readability and machine-readability.
Let’s take this opportunity to harness the power of HTML5 semantic elements like <time> and continue developing user-friendly and SEO optimized web projects. Happy coding!