HTML datetime Attribute

Introduction

The datetime attribute is a powerful feature in HTML that associates a machine-readable date, time, or duration with an element. It is most commonly used on the <time> element to mark publication dates, event schedules, and other temporal information while keeping friendly text for readers.

What You’ll Learn

Purpose of datetime

The primary purpose of the datetime attribute is to convey machine-readable date and time information. Browsers, assistive technologies, scripts, and search engines can parse the standardized value while users see natural language in the element’s text content.

📝 Syntax

Add datetime to a <time>, <ins>, or <del> element:

<p>Published <time datetime="2024-01-22T12:30:00Z">January 22, 2024</time></p>



<p>Updated <ins datetime="2024-03-01">pricing section</ins></p>

Syntax Rules

• Use ISO 8601 formats for consistency and broad compatibility.
• datetime is optional on <time>; when omitted, text content must be a valid date/time string.
• Include timezone info (Z or +05:30) when precision matters.
• JavaScript property is dateTime (capital T) on HTMLTimeElement.

💎 Values

The datetime attribute accepts values in ISO 8601 format. Common patterns include:

• Date-only — YYYY-MM-DD (e.g. 2024-01-22 for January 22, 2024)
• Time-only — HH:MM:SS (e.g. 14:30:00 for 2:30 PM)
• Combined date and time — YYYY-MM-DDTHH:MM:SS (e.g. 2024-01-22T12:30:00)
• UTC timezone — append Z (e.g. 2024-01-22T12:30:00Z)
• Offset timezone — 2024-01-22T12:30:00+05:30
• Duration — P3W (3 weeks), PT2H30M (2 hours 30 minutes)

Applicable Elements

datetime vs visible text

Examples Gallery

Publication date with time, and dynamic datetime via JavaScript.

<p>Article published on <time datetime="2024-01-22T12:30:00Z">January 22, 2024 at 12:30 PM UTC</time>.</p>

<time id="dynamicTime"></time>



<script>

  var el = document.getElementById("dynamicTime");

  var iso = new Date().toISOString();

  el.dateTime = iso;

  el.textContent = iso;

</script>

♿ Accessibility

• Readable text — Always provide human-friendly content inside <time>, not only a raw ISO string.
• Semantic markup — Screen readers benefit from the <time> element identifying temporal content.
• Timezone clarity — Mention timezone in visible text when it matters to users in different regions.
• Consistent formats — ISO values in datetime help assistive tech and calendar integrations parse dates reliably.
• Revision timestamps — Use datetime on ins and del to document when content changed.

💡 Best Practices

• Always use the ISO 8601 format when providing values for the datetime attribute to ensure consistency and compatibility.
• Incorporate the datetime attribute with the <time> element when displaying dates and times for enhanced semantics.
• When using JavaScript to set dynamic values, be mindful of time zones to provide accurate temporal information.