Language and Direction Patterns

Machine Readable Time

A visible date uses the time element with a datetime value so text and machine-readable value stay connected.

Program

The time element lets visible date text carry a precise machine-readable value. The user sees friendly text; the source keeps the exact date.

machine_readable_time.html
Visuals: captured from real browser rendering
<p>Next review: <time datetime="2026-07-15">July 15, 2026</time></p>
<style>
  time { font-weight: 700; }
</style>

  1. Create the time element.

    The visible date is wrapped in a time element.
    The visible date is wrapped in a time element.

  2. Add machine-readable date.

    The source includes the exact date value.
    The source includes the exact date value.

  3. Keep the visible date.

    The user sees friendly date text.
    The user sees friendly date text.

  4. Style the visible date.

    The visible time text can be styled like regular text.
    The visible time text can be styled like regular text.

  5. Check value and text.

    The visible date and datetime value stay connected in one element.
    The visible date and datetime value stay connected in one element.
time element time marks a date, time, or duration in text.
datetime datetime stores the machine-readable value.
visible date The element still displays friendly date text.