- Adding a Paragraph
- Specifying Fine Print
- Marking Important and Emphasized Text
- Creating a Figure
- Indicating a Citation or Reference
- Quoting Text
- Specifying Time
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Adding Author Contact Information
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Highlighting Text
- 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 time, date, or duration with the time element, which is new in HTML5. It allows you to represent this information in a variety of ways (
and 
).
As shown in the first example, the simplest form of the time element lacks a datetime attribute. But it does provide the times and date in the valid machine-readable format as required when datetime is omitted. The remaining examples show that the text between the time tags doesn’t need to match the valid format when datetime is present (the last example shows one case of each approach).
)
This shows how you might include a date for a blog post or news article. As is required for all cases of datetime, its value represents the text content in a machine-readable format.
The text content inside time (that is, <time>text</time>) appears on the screen for us humans (
and 
), whereas the value of the optional datetime attribute is intended for the machines among us. It requires a specific format; the sidebar “Understanding the Valid Time Format” covers the basics, and the first tip explains another case when the format is required.
)
To specify a time, date, or duration
- Type <time to begin a time element.
- If desired, type datetime="time" where time is in the approved machine-readable format (see the sidebar) that represents the text you’ll enter in step 4.
- Type > to complete the start tag.
- Type the text that reflects the time, the date, or the duration that you want to display in the browser. (See the first tip if you did not include datetime in step 2.)
- Type </time>.
TIP
If you omit the datetime attribute, the text content inside time must follow the machine-friendly format rather than being “free-form.” 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>April 20th, 2015</time>.</p> because the time text doesn’t follow the format in any of the three instances. However, when you do include datetime, you’re free to represent the date, time, or duration in the text content as you wish, as seen in the other examples in .
Understanding the Valid Time Format
The datetime attribute—or a time element without datetime—must provide the desired date and/or time in a specific machine-readable format. I’ve simplified it below:
YYYY-MM-DDThh:mm:ss
For example (local time):
1985-11-03T17:19:10
This means “November 3, 1985, at 10 seconds after 5:19 p.m. local time.” The hours portion uses a 24-hour clock, hence 17 instead of 05 for 5 p.m. 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.)
The format is a little different when representing a duration. There are a couple of syntax options, but this is the simplest to follow:
nh nm ns
(Where n is the number of hours, minutes, and seconds, respectively.)
The last example in shows it in action.
Global Dates and Times and Time Zone Offsets
If you’d like, you can represent your dates and times in a global context instead of a local one. (Or simply the time by omitting the date.) Add a Z at the end to mark the time zone as UTC (Coordinated Universal Time), the primary global time standard. (See https://en.wikipedia.org/wiki/Coordinated_Universal_Time.)
For example (global date and time in UTC):
1985-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 date and time with offset from UTC):
1985-11-03T17:19:10-03:30
This means “November 3, 1985, at 10 seconds after 5:19 p.m. Newfoundland Standard Time (NST),” because NST is 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.
Just as a reminder, if you do include datetime, it doesn’t require the full complement of information I just described, as the examples in show.