Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
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 red_circle-a.jpg. 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).

red_circle-a.jpg 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 gray_circle-c.jpg 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 (gray_circle-a.jpg and red_circle-c.jpg). The optional text content inside time (that is, <time>text<time>)appears on the screen as a human-readable version((gray_circle-b.jpg and red_circle-d.jpg) of the optional, machine-readable datetime value.

04_04.jpg

red_circle-b.jpg The article's publication date appears underneath its heading. The text content version of the time element displays, not the datetime value.

red_circle-c.jpg 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 gray_circle-d.jpg. I suggest you always include this human-readable form of thetime, since, currently, browsers won't display a value otherwise gray_circle-b.jpg.

...
<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>
04_05.jpg

red_circle-d.jpg The first three paragraphs show a time. The last does not (see the last tip).

To specify a precise time, calendar date, or both

  1. Type <time to begin a time element.
  2. If desired, type datetime="time" where time is represented in the approved format (see the “Understanding the datetime Format” sidebar).
  3. If the time represents the publication date of an article or the whole page, type either pubdate="pubdate" or pubdate.
  4. Type > to complete the start tag.
  5. 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).
  6. Type </time>.
  • + Share This
  • 🔖 Save To Your Account