The <time> element should actually do something

Tooltips would be great UX if they appeared when a user rested their eyes on the element

It's so annoying that implementations screw up accessibility of simple features, so then the platform has to add more complex features to compensate, and then every website has to individually reimplement the behavior that the browser should have had all along.

The biggest issues of title are that they're tooltips... amusingly I wrote a blog post about pretty much just this in March of this year too:

https://dpldocs.info/this-week-in-arsd/Blog.Posted_2025_03_03.html#tip-of-the-month

I rant about tooltips in the context of using them for time! But yeah, if you're doing <time> element specifically, the attribute does feel redundant, especially if you do what my blog said and just put the text up there (the example I used there was " just show "2025-02-27 (Yesterday)". ") but that's ok if it is a bit redundant, I still say html is a kind of api so having formatted data is nice and like I said in my other comment too, you can use it in some progressive enhancement javascript or user css as well. Even if the browser doesn't do anything, you can use it yourself sometimes.

I think the frustration being expressed - one which I share - is that front-end developers seemingly do not care to let the user-agent do what it's supposed to do and instead implement complicated site-specific workarounds and functionality which break all too often and slow down the website.

And that's kinda not what the article is about.

The article is about having the browser do more with the semantic information given to it via the time tag. Makes it even more frustrating to be honest.

One cute thing you can do is make a css rule to display attributes as content too. For example, you could do time::after { content: attr(datetime); } and then it'll show it next to it. But you'd probably want to format it differently, a little script on load could let the browser localize it, like set the title attribute to element.setAttribute("title", new Date(element.getAttribute("datetime").toString();). since the Date toString localizes by default for the user, and then title automatically does a hover tooltip.

of course yeah would be nice if the browsers did a bit more by default too...

Browsers should actually use the <time> element for something.

There, fixed that for you.

I think I heard Mozilla's Eemeli Aro talk about making <time> into an actual semantic time element this summer at Web Engines Hackfest.

On my blog I have a script which finds all time elements and replaces the content with a human friendly representation.

1. The title attribute is set to a date formatted with the user's locale.
2. The content of close times (future or past) is a (live updating!) relative time (not localized unfortunately).
3. Other times just display a date formatted in the user's locale.

Which is quite nice. But I agree that it really feels like something that should be built in. I told the browser what the time is, it should present it to the user in their preferred format (fully localized, user preference for using relative times, ...).

Before the time element does anything, it should probably mean something. Right now it is basically just a type hint. But what does the time mean? On its own, there is no semantic meaning behind it like published date / edit date / etc.

Schema.org itself supports using the itemprop attribute with the time element

I have a project that displays timestamps relative to the current time, uses the title attribute to display the absolute time (converted to the user's local timezone), and allows the element to be clicked to toggle between displaying local time and relative time. It's pretty generic and should be easy to use on other sites. It's useful for both casual users and power users who want more info.

I also set a CSS cursor to "wait" if the user hovers before the code runs or if an error happens and the conversion doesn't occur.

For a demo click the "created" timestamp on this page: https://rfchub.app/rfchub/rfc1-org-batch-markdown-exporter-job

Note that it requires the date-fns library.

And here's the code:

<!-- the server sends the UTC date and the expected format -->
<time datetime="2025-11-13T04:13:52.330Z" format="LLL d u HH:mm">Nov 13 2025 04:13</time>

  // call updateTimeElementsToBeLocalTime(el) when content updates
  const time_units = {
    year  : 24 * 60 * 60 * 1000 * 365,
    month : 24 * 60 * 60 * 1000 * 365/12,
    day   : 24 * 60 * 60 * 1000,
    hour  : 60 * 60 * 1000,
    minute: 60 * 1000,
    second: 1000,
  };

  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });

  function getRelativeTime (d1, d2 = new Date()) {
    const elapsed = d1 - d2;

    // "Math.abs" accounts for both "past" & "future" scenarios
    for (const u in time_units) {
      if (Math.abs(elapsed) > time_units[u] || u === 'second') {
        return rtf.format(Math.round(elapsed/time_units[u]), u);
      }
    }
  }

  function updateTimeElementsToBeLocalTime(root = document.body) {
    try {
      const $times = $$('time', root);
      for (let $time of $times) {
        if ($time.classList.contains('localized')) return;
        if (!$time.attributes.format) continue;
        const format = $time.attributes.format.value; // string dateFns format
        if (format === 'iso') continue;
        const iso = $time.dateTime; // string iso8601
        const d = new Date(iso);
        const local = dateFns.format(d, format);
        $time.innerText = getRelativeTime(d);
        $time.title = local;
        $time.classList.add('localized');
        $time.addEventListener('click', function(event) {
          const swap = $time.title;
          $time.title = $time.innerText;
          $time.innerText = swap;
        });
      }
    } catch (err) {
      console.error('error attempting to localize timestamps', err);
    }
  }
  window.updateTimeElementsToBeLocalTime = updateTimeElementsToBeLocalTime;

time {
  cursor: wait;
  text-decoration: underline #0006 dashed 1px;
  text-underline-offset: 2px;
}
time.localized {
  cursor: context-menu;
}

On my blog, I use time tags like this to show the publication time (yes I cheat on the dates):

<time datetime="2020-11-11T22:30:00+00:00">2020-11-11 22:30:00 UTC</time>

Then I use JavaScript to transform it to:

<time datetime="2020-11-11T22:30:00+00:00" title="2020-11-11 22:30:00 UTC">2020-11-11 23:30:00 CET</time>

My timezone handling is far from perfect but it's a start.