HTML and CSS Reference
It can be notoriously hard for computer programs to find and make sense of dates in web pages. HTML5
aims to solve this problem by introducing the new <time> element. This element allows you to specify your dates
in two ways, one for humans and one for computers. You do this by placing the human-readable date in the content
of your <time> element and the machine-readable version in a special attribute, datetime .
Machine-Readable Date Formats
To help computer programs understand dates better, the HTML5 specification outlines a number of valid date and
time formats that you should use. Dates and times are generally defined in the format YYYY-MM-DD HH:MM:SS.
Table 4-1 shows the valid formats you should use when specifying your dates and times in the datetime attribute.
Table 4-1 Date/Time Formats
Date/Time String Human-Readable Version
2013-11 November 2013
2013-11-01 1 st November 2013
16:20 20 minutes past 4
16:20:32 20 minutes and 32 seconds past 4
2013-11-01 16:20 20 minutes past 4 on 1 st November 2013
2013-11-01 16:20+0100 20 minutes past 4 on 1 st November 2013 (Showing the time difference from UTC)
The <time> Element
Using the <time> element allows you to write user-friendly dates and not worry about whether computers can un-
derstand them. Here is an example.
<time datetime="2013-11-06">Next Tuesday</time>
Here we give the user a nice readable date but also specify a valid machine-readable date that can be used by com-
Adding Articles to the News Page
The News page will contain a number of articles. This is a perfect opportunity to make use of the <article> and
<time> elements that you have learned about.
The code for this exercise can be found in folder 9.
To create the News page, follow these instructions: