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

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

  • Print
  • + Share This
  • 💬 Discuss
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 (red-a.jpg and red-c.jpg).

red-a.jpg 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).

099figb.jpg

Click to view larger image

red-b.jpg Only the time text displays in browsers, not the datetime value.

red-c.jpg 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 (red-b.jpg and red-d.jpg), 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.

099figd.jpg

Click to view larger image

red-d.jpg As expected, the date is below the heading.

To specify a time, date, or duration

  1. Type <time to begin a time element.
  2. 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.
  3. Type > to complete the start tag.
  4. 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.)
  5. Type </time>.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus