HTML and CSS Reference
In-Depth Information
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 2013
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-
puter programs.
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:
Search WWH ::

Custom Search