What You’ll Learn in This HTML5 Lesson
This week we’re introducing some handy new tags from the freshest of fresh, HTML5. Earlier this week we began with the Mark tag, and today we introduce the new Time tag.
New HTML5 Tag: <time>
The new element <time> is used for unambiguously encoding dates and times for machines, while still displaying them in a human-readable way.
The machine-readable part of the <time> element is usually encapsulated in the element’s datetime attribute. The content inside the <time> element is what gets presented to the end users.
<time datetime=”20:00″>8 PM</time>
If the machine-readable format is intended to be visible you don’t need the datetime attribute.
The datetime attribute is specifying the time in a 24-hour clock to there is no confusion between AM and PM. 1:00AM is 1:00 and 1:00PM is 13:00; perfectly clear and understandable to a machine. The human reads the content within the open and close <time> tags, so you can express time and dates in casual language, anyway you like, for the reader. The datetime attribute, hidden in the code, clarifies the exact time and date in a machine-readable precise manner. So, I can use phrases like “my birthday” and “next Wednesday dinner time” and “Dawn on April Fool’s Day” for my reader, and encode the precise time and date hidden in the datetime attribute with precision.
The HTML5 spec says “The time element represents either a time on a 24-hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.”
Here are some examples of the time tag:
<time datetime=2014-10-15T18:30>Dinner time, next Wednesday</time>
<time datetime=2011-03-31>Ben’s 40th Birthday</time>
<time datetime=20:00>8 PM</time>
<time datetime=04-01T06:00>Dawn on April Fool’s Day</time>
Notice that in each example above the datetime attribute clarifies the exact time or date, even if the visible text for the reader is imprecise or vague. If you wish to specify both time and date, then list the date first and use a separator: either a space or a capital T between the date and time.
The datetime attribute supports lots of variations on partial dates, so “fuzzy dates” are possible:
<time datetime="1955"> means the year 1955
<time datetime="1928-10"> means October 1928
<time datetime="05-15"> means 15 of May (any year)
<time datetime="1935-W19"> means week 19 of 1935
Here’s the full format, including all the optional values:
Here is a breakdown of the components:
T- a required separator if both date and time are specified (or use a space as a separator)
hh: hour in a 24-hour clock
ss: seconds (you can use three digits for milliseconds)
TZD- Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)
Time Zone Offset
If you don’t specify the Time Zone, then it is assumed to be the local time zone. Adding a Z at the end of the datetime value indicates Zulu, or Greenwich Mean Time. Here are some examples of using a Time Zone Offset, to indicate the time reference is not local time, or Greenwich Mean Time. The optional Time Zone Offset is specific to a certain time zone (location).
<time datetime=”08:00″> indicates 8:00 am in the local time zone
<time datetime=”08:00-03:00″> means 8:00 am in Rio de Jeneiro
<time datetime=”08:00+03:00″> means 8:00 am in Madagascar
You can also use the datetime attribute to specify a duration. For example, in a course listing, it might be nice to specify the duration of the course in days and hours. To indicate a duration, use the datetime attribute with the value P followed by the day value, then T followed by hours, minutes, seconds (if you wish to specify hours, this is optional).
For example, a duration of 2 days (12 hours and 30 minutes), could be written as:
<time datetime="P2DT8H30M">Two-day Yoga Workshop</time>
Optional Title Attribute
If you would like to add a visible tooltip, you can use the title attribute with the time tag. You could add information that the viewer will see when they hover over the time.
<time datetime="P2DT12H" title="2 days, 6 hours each day">The class is 2 days.</time>
What is the Benefit of Using Time?
Why should I care if the precise machine-readable date and time is encoded in my pages? What do you mean by “the encoding is for machines”? Having that data makes it easier for your browser and apps to be developed that do convenient things for you. For example, maybe you can right-click a date and add it to your calendar automatically, even if it just said “the party is next Thursday night”. That’s just one example. I wonder what kind of app you could create that could make use of a date and time?
Bruce Lawson put it really well on HTML5 Doctor, so I will quote him:
The uses of unambiguous dates in web pages aren’t hard to imagine. A browser could offer to add events to a user’s calendar. A Thai-localized browser could offer to transform Gregorian dates into Thai Buddhist era dates. Content aggregators can produce visual timelines of events.
Search engines can produce smarter results. For example, in the recent heavy snow in the UK, I searched for school closures in my home town and discovered my kids’ school was closed. After receiving a phone call from the school asking where my kids were, I re-examined the web page. In small print at the bottom of the page were the words “published 5 January 2008”. I expect that operators of search engines would rank more current pages more highly on searches connected with current events.
Coming Soon: WBR
What the heck is that?
We’ll finish this mini-series of three new HTML5 tags in the next lesson. In our third lesson we’ll go over the element WBR. In the meantime, see if you can guess what the letters stand for. It’s not Winged Beaver Rodeo or Waffle Breakfast Revolution so you can get those ideas out of your head.
Whisper Before Raccoons?
Welcome Big Red?