START A COURSE

The HTML and CSS Blog:

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.

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.

<time>20:00</time>

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

Time element

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.

Fuzzy Dates

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

Did you say fuzzy dates are ok?

Datetime Values

Here’s the full format, including all the optional values:

YYYY-MM-DDThh:mm:ssTZD

Here is a breakdown of the components:

YYYY- year

MM- month

DD- day

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

mm: minutes

ss: seconds (you can use three digits for milliseconds)

TZD- Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)

Datetime attribute

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

Examples:

<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

Duration

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=”P2DT12H30M”>

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.

HTML5 Time tag

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?

wbr tag

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.

White Bread?

Whisper Before Raccoons?

Welcome Big Red?

Nope!

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.