#30DaysofHTML Day 15: < time > < time > < time >

See what's become of me

I'm sure you're shocked to know that the the <time> element is for... parsley, sage, and rosemary! Just kidding. That’s thyme. 🪴

✅ <time> identifies 24-hour clock times, as well as Gregorian calendar dates. It may also be used for a time duration.

⛔️ Time has many confusing formats across programming languages and other standards. That's where all of the potential issues are, not in the HTML itself.

There are no fewer than 58 examples of how <time> might be formatted in the WHATWG documentation. 👀 There are also at least 42 different artists who have recorded Hazy Shade of Winter. 🤘🏽 Since no one has <time> for either list, we'll pick only a few of each.

🎵 Hazy Shade of Winter, Boomer original, Simon and Garfunkel. Sorry, kids,"The Umbrella Academy" did a cover version.

<time> in the HTML sense

✅ <time> indicates where time is occurring in your text, including dates, times, and durations.

Let's identify the time elements in this paragraph of text:

<p>The last in-person conference I attended was ConFoo in Montreal, Canada. It was held <time>February 26</time> to <time>February 28, 2020</time>. There were at least <time>7 1/2 hours</time> of sessions each day. I flew home on <time>Saturday at 1:03PM</time>.</p> 

While these time cues are understandable to humans, they are not machine-readable. The above paragraph would fail validation for this reason.

⚠️ Either the text in between the <time> tags must be machine-readable as defined in the spec, or we'd need to use the datetime attribute. And let's be honest - no humans want to read machine-readable formats, so it’s all about datetime.

<p>The last in-person conference I attended was ConFoo in Montreal, Canada. It was held <time datetime="2020-02-26">February 26</time> to <time datetime="2020-02-28">February 28, 2020</time>. There were at least <time datetime="PT7H30M">7 1/2 hours</time> of sessions each day. I flew home on <time datetime="2020-02-29T13:03">Saturday</time>.</p> 

The above paragraph passes validation.

As always, if we have misinterpreted something when reading the specs, please let us know in the comments.

🎸 Bodyjar soothes our GenX punk rock souls, 1995. We also love Snuff from 1990.

Formatting common time

The following formats may be used as content in <time> or as the value of a datetime attribute.

• Year-month-day. Year or day are optional.

• Hour:minute:seconds. Seconds are optional and may include a decimal.

• Year-month-day hour:minute:seconds OR Year-month-dayThour:minute:seconds. There must be either a T or a space between the date and the time for machine parsing.

🎤 The Bangels did a PEAK 1980s cover for the movie "Less than Zero" in 1987, back in Robert Downey Jr's bad old days. Love the big hair. ❤️

Other types of time to format

Look them up if you need them.

• Time zones and time zone offsets

• Global date and time strings

• Week numbers (like 2021-W17)

• A duration string (like 8h, or 2h 12m 16s, or PT2H12M16S)

Other uses of time

Don't confuse <time> with three possible <form> inputs and two elements:

• <input type="time">, specifically for hours and minutes (seconds optional)

• <input type="date">, specifically for year-month-day

• <input type="datetime-local">, specifying a date and a time in a single input.

• <ins> and <del>, as discussed recently, also use the datetime attribute.

All of the above elements use the same date and time formatting used for <time> and datetime as values.

🎧 How we feel formatting time. Sodom, the German thrash metal band.

<time> demo

🖥 View the <time> demo on CodePen.

Challenge: Using time formats

👩🏽‍💻 Try today’s CodePen Challenge about the use of time formats. When you’ve completed it, post your answer in our discussion in Substack.

More information and examples

📚 MDN: <time>

📚 WHATWG: <time>

📚 CSS-Tricks: The ‘ time ‘ element

🎹 Thanks to Second Hand Songs for educating us about cover versions of many songs!