html · level 2 · unit 5 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<time> shows a date to people and stores one for computers.
Next Saturday, 7/11 and 7th November can all mean the same day, but a computer cannot be sure. Wrap a date in <time> and give it a datetime attribute in a format.
Dates go year, month, day, joined by dashes: 2026-11-07. Times use the 24-hour clock: 18:30. For both together, put a T between them: 2026-11-07T18:30.
The words between the tags can say anything friendly. Search engines and calendar apps read the datetime, so they put your event on the right day.
<p>Bonfire night party:
<time datetime="2026-11-07T18:30">Saturday 7 November, 6.30pm</time>
</p>Press show my page to see it here.
Always pad with zeros: March is 03 and the 5th is 05.
guess first
What does the reader see?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<p>Doors open at <time datetime="19:00">7pm</time>.</p>your turn
Your turn. Date the summer fair.
The fair is on 20 June 2026. Write it machine-readable in the datetime blank, then write the date in friendly words between the tags.
Press show my page to see it here.
- the datetime is 2026-06-20not checked yet
- people see a friendly datenot checked yet
fix it
Calendar apps put book club on the wrong day. Can you fix it?
Press show my page to see it here.
- the date runs year, month, daynot checked yet
- Read the
datetimevalue. Which part is the year? - Machine-readable dates start with the year, then the month, then the day.
- Change the value to
2026-03-12, then press run.
nailed it
your dates make sense to computers too. :D
<time>wraps a date or a time.datetimeholds it as year-month-day or 24-hour time.- People see the friendly words between the tags.
new words in your collection
- machine-readable
This lesson isn’t saved. A free account remembers every lesson you finish.