HTML BasicsLesson 34 of 36

The time and data Tags

The time tag marks a date or time so both humans and machines can read it. People see a friendly format like March 4, 2026; the datetime attribute carries the same moment in a clean machine format. The readable text stays natural, the attribute stays exact.

The time tag marks a date or time so both humans and machines can read it. People see a friendly format like March 4, 2026; the datetime attribute carries the same moment in a clean machine format. The readable text stays natural, the attribute stays exact.

Why that split matters: a search engine or a script trying to parse "March 4th, 2026 at 10:30 in the morning" is guessing. The datetime attribute removes the guess. The data tag applies the same idea to values that are not dates, like product codes, prices, or quantities.

Both work in every modern browser. Reaching for them is free: if the text is already on the page, adding the attribute costs one line and gives scripts, search engines, and future tooling a dependable value. The cost is one attribute, and the payoff is data that never needs parsing guesses.

The datetime format

The datetime attribute uses the ISO format: year, month, day, separated by dashes, optionally followed by a time. For example, 2026-03-04T10:30 means March 4, 2026 at 10:30 in the morning. Times can include a timezone offset for exactness.

HTML
<time datetime="2026-03-04">March 4, 2026</time>
<time datetime="2026-03-04T10:30">March 4, 10:30 AM</time>

Data for other values

When the value is not a date, data takes over. The visible text shows the friendly version, and the value attribute holds the strict one. Scripts and search engines read value instead of guessing from the text, which keeps data clean even when the label changes.

HTML
<data value="A1-204">Printer paper, 500 sheets</data>

Syntax

HTML
<time datetime="2026-03-04T10:30">March 4, 10:30 AM</time>

<time datetime=""> Must Be ISO, Not What User Sees - And <data> Is Not Time

Display text can be 'Next Tuesday' but datetime attribute MUST be machine ISO: 2026-09-15T14:30+02:00, otherwise search engines and calendar tools ignore it. Common bug: <time datetime="15/09/2026"> fails silently - validator wants YYYY-MM-DD. <data value="SKU-123"> is its generic cousin for any machine value (price, product ID) - don't abuse time for non-dates.

HTML
<time datetime="2026-08-27">today</time> + <data value="840">$8.40</data>

Good to know

  • Time marks dates and times for machines too.
  • Datetime must use the ISO format.
  • Data handles non-date values like codes.
  • Without datetime, the visible text itself is used.
Try it Yourself Edit the code, press Run, then check what changed in the Result.
Ready
Code
Result

Practice makes it stick

Open the Playground and build your own page with the tags you just learned.

→ Open Playground