Times and Dates

Times and Dates on the Internet When you encounter a web page that mentions a date and time, such as "9:00 on June 5", have you ever wondered: 9:00am or 9:00pm? Is it June 5 of the current year? Next year? Or is this an outdated page and the date is from some year in the past? Which time zone? Search engines and screen readers suffer from the same problem, often unable to determine these basic factors. To help solve this issue, HTML5 has introduced the <time> element. Although the element is named <time>, it is comprehensive and encompasses calendar dates, times of the day, time zones, and any combination of the three.

Using <time> for Calendar Dates The first step to allow search engines and screen readers to understand dates and times was to create a standard format to be used consistently by creators of websites. HTML5 has done this. For calendar dates, acceptable formats are: YYYY-MM-DD (Year-Month-Date) YYYY-MM (Year-Month) [intentionally does not specify a day] MM-DD (Month-Day) [intentionally does not specify a year] Here are actual examples, using each format: <p>The commencement ceremony will be held on <time>2015-05-16</time>.</p> <p>The Rio Olympics will take place in <time>2016-08</time>.</p> <p>Independence Day is observed each year on <time>07-04</time>.</p> The commencement ceremony will be held on 2015-05-16. The Rio Olympics will take place in 2016-08. Independence Day is observed each year on 07-04.

Using <time> for Times of the Day For times, acceptable formats are: HH:MM (Hour:Minute) HH:MM:SS (Hour:Minute:Second) Here are specific examples: <p>The reception begins at <time>09:30</time>.</p> <p>The lightning struck the tower last night at exactly <time>23:13:09</time>.</p> The reception begins at 09:30. The lightning struck the tower last night at exactly 23:13:09. HTML5 solves the AM vs. PM issue by using military time. Thus, nine in the morning is 09:00 and nine in the evening is 21:00. Midnight is represented as 00:00. Be careful not to omit a leading zero in dates and time. It's 09:00 and 2013-06- 06, not 9:00 or 2013-6-6.

Combining a Date and Time HTML5 lets us define a specific time of day on a specific calendar date, but we are then also required to designate a time zone. The format is: YYYY-MM-DDTHH:MM:SS(+/-)ZZ:ZZ Looks confusing, but it's not that complicated: <p>The festivities begin in Times Square at <time>2014-12-31T22:00-05:00</time>.</p> <p>We have dinner reservations in Beijing at <time>2015-08-02T20:30+08:00</time>.</p> The festivities begin in Times Square at 2014-12-31T22:00-05:00. We have dinner reservations in Beijing at 2015-08-02T20:30+08:00. By including a time zone declaration, a specific point in time can be defined and understood, no matter where the observer is located. Time zones are based on their relation to the local time in Greenwich, England. Locations east of Greenwich are ahead (+) and those west are behind (-). In our examples above, New York City is five hours behind (-05:00) and Beijing, China is eight hours ahead (+08:00).

The datetime Attribute By now, you probably noticed that while the examples we used might keep the search engines happy, the same cannot be said for our web visitors! No one wants to read content on a web page presented like this: The festivities begin in Times Square at 2013-12-31T22:00-05:00. HTML5 offers us a great solution. By using the datetime attribute, we can continue to supply the format we just learned to search engines and screen readers, but then provide something more friendly to our readers. The format is: <time datetime="machine-readable format">Our own description</time> Let's revisit all our prior examples but now put the <datetime> feature to work.

Examples of datetime <p>The commencement ceremony will be held on <time datetime="2015-05-16">May 16, 2015</time>.</p> <p>The Rio Olympics will take place in <time datetime="2016-08">August of 2016</time>.</p> <p>Independence Day is observed each year on <time datetime="07-04">July the Fourth</time>.</p> <p>The reception begins at <time datetime="09:30">9:30 in the morning.</time></p> <p>The lightning struck the tower last night at exactly <time datetime="23:13:09">nine seconds past 11:13PM.</time></p> <p>The festivities begin in Times Square at <time datetime="2014-12-31T22:00-05:00">10pm on New Year's Eve.</time></p> <p>We have dinner reservations in Beijing at <time datetime="2015-08-02T20:30+08:00">8:30pm on August 2nd, 2015.</time></p> The commencement ceremony will be held on May 16, 2015. The Rio Olympics will take place in August of 2016. Independence Day is observed each year on July the Fourth. The reception begins at 9:30 in the morning. The lightning struck the tower last night at exactly nine seconds past 11:13PM. The festivities begin in Times Square at 10pm on New Year's Eve. We have dinner reservations in Beijing at 8:30pm on August 2nd, 2015. These are much better, as visitors will not even see the machine-readable format.

Using datetime Let's go back to our book review page and add a <time> element and datetime attribute: <h2>My First Book Review</h2> <hgroup> <h3>Frankenstein:</h3> <h4>or, The Modern Prometheus</h4> </hgroup> <p>Posted: <time datetime="2013-03-15">FRI March 15, 2013</time></p> <p>I had seen the movie... ... Use the <time> element only with specific dates or times, not with vague descriptions like "around five in the afternoon" or "every Tuesday" or "sometime next week."