HTML basics · Lesson 10 of 12 · 7 minutes

HTML basics: Dates and machine-readable time

time can display a friendly label while datetime supplies an unambiguous machine-readable date.

Open the lab Course map

Mastery 0/3Run itExplain itApply it

Current edit

PreviewNo external resources

Your objectives

Hints are always available. Wrong turns never cost XP.

1
Build dates and machine-readable time
Build this first target: containing “Next workshop:”. Inspect the structure before checking the lesson.
Hint & worked example
time can display a friendly label while datetime supplies an unambiguous machine-readable date.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
Next workshop:
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.
2
Extend the dates and machine-readable time example
Extend your file to include: containing “Next workshop:”; <time> inside (datetime="2026-09-12") containing “September 12, 2026”. Inspect the structure before checking the lesson.
Hint & worked example
time can display a friendly label while datetime supplies an unambiguous machine-readable date.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
Next workshop: <time datetime="2026-09-12">September 12, 2026</time>
```
Common mistake to avoid: Replacing semantic elements with generic divs automatically improves accessibility.
3
Verify the complete dates and machine-readable time pattern
Finish the pattern with: containing “Next workshop:”; <time> inside (datetime="2026-09-12") containing “September 12, 2026”; containing “Doors open at .”; <time> inside (datetime="09:30") containing “9:30 AM”. Inspect the structure before checking the lesson.
Hint & worked example
time can display a friendly label while datetime supplies an unambiguous machine-readable date.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
Next workshop: <time datetime="2026-09-12">September 12, 2026</time>
Doors open at <time datetime="09:30">9:30 AM</time>.
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.

Understand the pattern

time can display a friendly label while datetime supplies an unambiguous machine-readable date.

Misconceptions to reject

A visual appearance alone guarantees the intended HTML meaning.
Replacing semantic elements with generic divs automatically improves accessibility.

The preview is a sanitized subset, not a full browser compatibility test.

Worked example and expected result

<p>Next workshop: <time datetime="2026-09-12">September 12, 2026</time></p>
<p>Doors open at <time datetime="09:30">9:30 AM</time>.</p>

time can display a friendly label while datetime supplies an unambiguous machine-readable date.

Try a variation

Adapt the final example to a different project name while retaining its structure and relationships. A different context still needs a real browser and accessibility check.

Explain it

Which statement correctly explains dates and machine-readable time?Replacing semantic elements with generic divs automatically improves accessibility.time can display a friendly label while datetime supplies an unambiguous machine-readable date.A visual appearance alone guarantees the intended HTML meaning.

Apply it elsewhere

You reuse dates and machine-readable time in a different project. What must still be verified?The meaning, relationships, and accessible names in the new document.Nothing; passing a single exercise guarantees every future use.Only whether the source code has the same number of lines.

Keep the momentum.

Complete the lab, then explain and apply the pattern.

Next: HTML basics: Data attributes Try an incident drill

Anonymous lesson and mastery progress lasts for this session. Sign in to keep synced lesson XP between sessions; mastery stays device-local. No speed bonus, lost lives, or hint penalties.

Keep learning

MDN: HTML structure