- Sep 5, 2013
- 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
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).
Only the time text displays in browsers, not the datetime value.
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.
As expected, the date is below the heading.
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>.