liveBook · Manning

Datetime attribute

As explained in Web Design Playground, Second Edition

The datetime attribute supplies a machine-readable date or time value for an HTML time element.

The datetime attribute gives a <time> element a machine-readable date or time, while the text between the tags stays friendly for human visitors. Think of it as a tiny translation layer: people see “August 23rd, 2023,” while software can read an exact value such as 2023-08-23T16:00:00-05:00. The browser does not automatically style or format the date; the attribute supplies meaning for browsers and other software. section 16.1

A human-friendly date with a machine-friendly value

This web page was last modified on <time datetime="2023-08-23T09:25:00-05:00">August 23rd, 2023 at 9:25AM</time>. section 16.1

Here's the syntax to use for the <code>time</code> element:<br> <code>&lt;time datetime="<var>machine-value</var>"&gt;<var>human  text</var>&lt;/time&gt;.</code>

Use this syntax pattern to place a machine value in datetime and readable text between the time tags. section 16.1

How Web Design Playground, Second Edition covers it

How deep it goes
Defines the human-readable and machine-readable halves, but stops short of browser formatting or deeper processing details.
Examples
Uses a last-modified timestamp and a syntax pattern pairing an ISO-like machine value with friendly date text.
What you can do after
Apply it by pairing readable date or time text with a machine-readable datetime value inside a time element.
How it connects
Connects the datetime attribute to the HTML time element and semantic date-and-time markup.
Cover of Web Design Playground, Second Edition
liveBookmanning.com
Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.