Coding and Displaying Time in HTML 5

Mastering HTML5 - Part 18

Forward: In this part of the series, we see how to code and display time in HTML 5.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 18 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series, we see how to code and display time in HTML 5. The time and date in HTML 5 may not have the same format as in ordinary use in your country. In this series we shall learn the HTML 5 format of these quantities and then see how to use them to code and display time (or date or both).

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Global and Local Date and Time
Global date and time, also known as UTC or GMT is the date and time in the country, Britain. Local date and time is the date and time in your own country. So, people in different countries have different local date-times.

Format of Date and Time
The format for the date and time is,

Year-Month-MonthDayTHour:Minutes

An example is,

2011-05-15T13:09

The year consists of four digits. Then you have the hyphen. The month consists of two digits (a single digit is preceded by zero) from 1 to 12. Then you have the hyphen. The month day is a two-digit number (a single digit is preceded by zero) from 1 to 31. Then you have T to separate the date part from the time part. The hour consists of two digits (a single digit is preceded by zero) from 0 to 23. We are dealing with the 24-hour clock here, so midnight is zero O’Clock. The minutes consist of two digits (a single digit is preceded by zero) from 0 to 59.

Difference between Global and Local Date and Time
Global date and time ends with an uppercase Z. Local date and time does not have the uppercase Z ending. An example of a global date and time is, 2011-05-15T13:09Z. An example of a local date and time is, 2012-11-03T22:17.

The Date
In HTML 5 the date has the following format:

    Year-Month-MonthDay

An example is, 2012-11-03. This is an extract from either the global or local date and time.

The Time
In HTML 5, the time is a 24-hour clock time in the format,

    Hour:Minutes

An example is, 22:17. This is an extract from either the global or local date and time.

The time Element
The time element is a text-level element. It is an inline element. It is used to code and display time on a web page. The time element is a double tag element.

The datetime Attribute
The time element has the datetime attribute, which should always be used. The value of the datetime attribute is a 24-hour clock time or a date or a date-and-time (global or local). The content of the time element should be in a form convenient to the user of the value of the datetime attribute. We look at some examples:

A Date Example
A date example is,

    <time datetime="2011-05-15">May 15 2011</time>

I assume the user here is an American (U.S.A); in the U.S.A you tell the date beginning with the month. The value of the datetime attribute is in the HTML 5 format. The content of the time element is in the format convenient to the user (that the user is used to or would appreciate). There is no strict rule on what goes into the content of the time element. Here, what will be displayed to the user is, May 15 2011 and not 2011-05-15, which must be the coding equivalent.

A time Example
A time example is,

    <time datetime="22:17">22h17</time>

Here, what is displayed to the user is 22h17. However, the corresponding value of the datetime attribute must be, 22:17.

A Global Date-Time Example
An example for the global time is,

    <time datetime="2011-05-15T13:09Z">05/15/2011 13:09 GMT</time>

Here, the content format and the datetime attribute format are different. Whatever is the case, the value of the datetime attribute must respect the HTML 5 format.

A Local Date-Time Example
An example for the local time is,

    <time datetime="2012-11-03T22:17">11/03/2012 22h17</time>

Here, again, the content format and the datetime attribute format are different. Whatever is the case, the value of the datetime attribute must respect the HTML 5 format.

Try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>

    <time datetime="2011-05-15T13:09Z">05/15/2011 13:09 GMT</time>

</body>
</html>

The pubdate Attribute
If the date or time or both is to indicate when an article is published, then the time element needs to have the pubDate Boolean attribute, as in,

<time pubdate datetime="2011-05-15">May 15 2011</time>

The presence of the pubdate attribute means the article was published at the date specified as the value of the datetime attribute. The absence of the attribute, means that the value of the datetime attribute is referring to some other event. If there is no article in the document, then the presence of the pubdate attribute means the value of the datetime attribute is when the whole web page document was published.

That is it, for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Coding and Displaying Time in HTML 5

Mastering HTML5 - Part 18

Introduction

Related Links

Comments