- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
Beginner Recipe: How to markup the date and time using the <time> element
The time element allows us to code dates and times that are readable by machines, but are displayed to users in a readable fashion.
So with this we can timestamp things like publishing dates, or events which can populate other technologies (a calendar being the obvious example).
The time element has two optional attributes: datetime and pubdate
The end-user (you!) will see the content inside the time tag, but a machine will be able to read the datetime value: datetime="2011-04-01T16:00Z". The time part of this value (T16:00) is optional. You can also add a time zone offset - T16:00+04:00. Z represents Universal Coordinated Time (UTC), which is the same as adding a time zone offset of +00:00.
Pubdate is a Boolean attribute. If used, its intention is to indicate the date, and possibly time, of the publication of its nearest parent article element. If there is no parent article element, then the pubdate refers to the whole document. Each article element must only have one time element with a pubdate.
The time element is intended to show precise dates, such "22nd January 2011", not vague dates such as "Some point in 2011". The datetime attribute must be in the format of the Gregorian calendar: YYYY-MM-DD, with the time coded as T00:00.
So, some allowed examples:
<article>.... </footer> <p>This news article was published on <time pubdate datetime="2011-04-01T16:00"> 1st April 2011 at 4pm</time> by <a href="#">Tom Leadbetter</a></p> </footer> </article> <article >
<h1>Christmas day family photo</h1> <p>It was lovely to have the family here for <time pubdate datetime="2010-12-25"> Christmas Day 2010</time></p> <figure> <img alt="" src="000001.jpg" /> <figcaption>The Leadbetter family on Christmas morning</ficaption> </figure> </article>
<p>HTML6 release date is due on <time datetime="2040-01-04">April 1<sup>st</sup> 3040</time></p>