- 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
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>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>.