- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
This chapter is from the book
Specifying Time
You can mark up a precise time or calendar date with the time element. This element is new in HTML5. (See the sidebar “Understanding the datetime Format” for more specifics about the calendar date system.)
One of the most common uses of time is to indicate the publication date of an article element. To do so, include the pubdate attribute. The time element with pubdate represents the publication date of the nearest ancestor article element 
. You could also time-stamp an article’s reader-submitted comments with time, datetime, and pubdate, assuming each comment is wrapped in an article element that is nested in the article to which the comment relates (see Example 2 of the sidebar in “Creating an Article” in Chapter 3).
As is proper, the datetime attribute and the time element’s text reflect the same date, though they can be written differently than one another (see 
for more examples). This time element represents the date the article was published, because the pubdate attribute is included.
...
<body>
<article>
<header>
<h1>Cheetah and Gazelle Make Fast Friends</h1>
<p><time datetime="2011-10-15" pubdate="pubdate">October 15, 2011</time></p>
</header>
... [article content] ...
</article>
</body>
</html>
You can represent time with the time element in a variety of ways (
and 
). The optional text content inside time (that is, <time>text<time>)appears on the screen as a human-readable version((
and 
) of the optional, machine-readable datetime value.
The article's publication date appears underneath its heading. The text content version of the time element displays, not the datetime value.
The time element can be utilized several ways. The simplest form (the first example) lacks a datetime attribute. But it does provide the date and times in the valid format as required when datetime is omitted. The top three examples contain time and/or date with text inside time, which will display on the screen 
. I suggest you always include this human-readable form of thetime, since, currently, browsers won't display a value otherwise .
... <body> <p>The train arrives at<time>08:45</time>and<time>16:20</time>on<time>2012-04-10</time>.</p> <p>We began our descent from the peak of Everest on<time datetime="1952-06-12T11: 05:00">June 12, 1952 at 11:05 a.m. </time></p> <p>They made their dinner reservation for<time datetime="2011-09-20T18: 30:00">tonight at 6:30</time>.</p> <p>The record release party is on<time datetime="2011-12-09"></time>.</p> </body> </html>
The first three paragraphs show a time. The last does not (see the last tip).
To specify a precise time, calendar date, or both
- Type <time to begin a time element.
- If desired, type datetime="time" where time is represented in the approved format (see the “Understanding the datetime Format” sidebar).
- If the time represents the publication date of an article or the whole page, type either pubdate="pubdate" or pubdate.
- Type > to complete the start tag.
- If you want the time to display in the browser, type text that reflects the time, the date, or both (see the first tip about the allowed text format).
- Type </time>.
TIP
If you omit the datetime attribute, the text content must conform to the valid date or time format. In other words, the first example in could not be coded as <p>The train arrives at <time>8:45 a.m.</time> and <time>4:20 p.m.</time> on <time>October 4th, 2012</time>.</p>. However, when you do include datetime, you’re free to represent the date or time in the text content as you wish, as seen in the second and third examples of .
TIP
Always include a text version of the time and date inside the time element if you want it to show in your page. If it’s missing, browsers are supposed to display text that is based on datetime’s value, but support is lacking greatly at the time of this writing .
Understanding the datetime Format
The time element’s time is based on a 24-hour clock with an optional time-zone offset from UTC (Coordinated Universal Time). The datetime attribute provides the date and time in a machine-readable format, which I’ve simplified for this initial example:
YYYY-MM-DDThh:mm:ss
For example (local time):
2011-11-03T17:19:10
This means “November 3, 2011, at 10 seconds after 5:19 p.m. local time.” T separates the date (YYYY-MM-DD) and time (hh:mm:ss), and if you include a time, the seconds are optional. (You may also provide time with milliseconds in the format of hh:mm.sss. Note the period before the milliseconds.)
If you’d like, you can represent your time in a global context instead. Add a Z at the end, and the time zone is UTC.
For example (global time in UTC):
2011-11-03T17:19:10Z
Or, you can specify a time-zone offset from UTC by omitting Z and preceding the offset with – (minus) or + (plus).
For example (global time with offset from UTC):
2011-11-03T17:19:10-03:30
This means “November 3, 2011, at 10 seconds after 5:19 p.m. Newfoundland standard time (it’s minus three and a half hours from UTC).” A list of time zones by UTC offsets is available at http://en.wikipedia.org/wiki/List_of_time_zones_by_UTC_offset.
If you do include datetime, it doesn’t require the full complement of information I just described, as the examples in show. Technically speaking, dates in the time element are based on the proleptic Gregorian calendar (as you may know, the Gregorian calendar is the internationally accepted civil calendar system in common use today). As such, HTML5 recommends you don’t use it for pre-Gregorian dates (chances are this won’t be an issue for your content, but just so you know about it). There has been a lot of discussion about this limitation, but it’s a complicated topic. Read http://dev.w3.org/html5/spec-author-view/the-time-element.html for more information and examples, or www.quirksmode.org/blog/archives/2009/04/making_time_saf.html for an extensive explanation of some of the issues.
TIP
You can specify pubdate as either
<time pubdate></time>
or <time pubdate="pubdate"></time>.
However, if you include it, either datetime or a text content version of the time is required .
TIP
The datetime attribute’s machine-readable format (see the “Understanding the datetime Format” sidebar) allows for syncing dates and times between Web applications. As of this writing, no browser displays the datetime value ( and ).