How does the element work in HTML5?

The <time> element in HTML5 is used to represent dates and times in a machine-readable format for improved accessibility and SEO; 1. It uses the datetime attribute to encode dates as YYYY-MM-DD, times as HH:MM or HH:MM:SS, and combined values as YYYY-MM-DDTHH:MM:SS; 2. Time zones can be specified with UTC offsets or Z for UTC; 3. When datetime is omitted, the element’s content must be a valid date/time string; 4. It enables search engines to show rich snippets, assists calendar apps in parsing events, and improves accessibility; 5. Use it for event dates, publication timestamps, birthdays, deadlines, or any meaningful time-sensitive content to add semantic structure to HTML.

The <time></time> element in HTML5 is used to represent a specific time, date, or both in a machine-readable format. It helps browsers, search engines, and assistive technologies understand temporal data on a webpage, which can improve accessibility and SEO.

What the <time></time> Element Does

The <time></time> element doesn't change how the time or date appears visually on the page—it's purely semantic. But it allows you to encode dates and times in a standardized way using the datetime attribute. This makes it easier for software (like calendar apps or search engines) to extract and use the information.

For example:

<p>The event starts at <time datetime="2025-03-25">March 25</time>.</p>

Here, the text "March 25" is displayed to users, but the machine-readable version is "2025-03-25".

Key Uses and Attributes

• datetime attribute: This is the core of the <time> element. It contains the actual date/time in a valid format.

  element work in HTML5?" />
  • For dates: YYYY-MM-DD (e.g., 2025-03-25)
  • For times: HH:MM or HH:MM:SS (e.g., 14:30, 14:30:00)
  • For combined date and time: YYYY-MM-DDTHH:MM:SS (e.g., 2025-03-25T14:30:00)
  • For time zones: You can include a UTC offset or use Z for UTC (e.g., 2025-03-25T14:30:00 01:00 or 2025-03-25T14:30:00Z)

• When datetime is omitted, the element’s content must be a valid date/time string.

Examples:

<!-- Just a date -->
<time datetime="2025-03-25">March 25, 2025</time>

<!-- Just a time -->
<time datetime="13:30">1:30 PM</time>

<!-- Date and time -->
<time datetime="2025-03-25T13:30:00">March 25 at 1:30 PM</time>

<!-- A recurring event (using 'pubdate'-like hint, though not standard anymore) -->
<time datetime="2025-W13">Week 13 of 2025</time>

Practical Benefits

• Search engines can use this data to display rich snippets (e.g., event listings in search results).
• Calendar apps can more easily parse event times.
• Accessibility tools can announce dates and times more accurately.
• Microdata and structured data (like Schema.org) work better when dates are clearly marked.

Note: The pubdate attribute was once proposed to mark publication dates but was removed from the HTML5 spec. Instead, use <time></time> with appropriate context or microdata.

When to Use It

Use <time></time> whenever you’re showing:

• Event dates/times
• Publication or update timestamps
• Birthdays, deadlines, schedules
• Any time-sensitive content

Basically, if a date or time appears in your content and has meaning beyond just text, wrap it in <time></time> with a datetime attribute.

It's not complex, but it adds valuable structure to your HTML.

The above is the detailed content of How does the element work in HTML5?. For more information, please follow other related articles on the PHP Chinese website!