How do you mark up the 'last updated date'?

We use the ‘last updated date’ to show the most recent time a page was updated with new information, content, or changes. Currently, we have it marked up as an H5, but we’ve realised that this isn’t the best approach for accessibility since it doesn’t always follow the correct heading order (e.g., a page might not have headings H1 through H4).

What’s the best way to semantically mark up this date for accessibility purposes?

Hi @sharron.chen, thank you for catching this, it’s a great find! Following proper semantics standards it shouldn’t be a heading. While the design system doesn’t have specific guidelines around this element, we recommend changing “Last updated” to a non-heading element, such as a strong tag.

@Digital.NSW Thank you! I did some digging into this myself and that seems to be the advice I found. Using heading markup for the last updated date is least ideal for accessibility. Headings are meant to represent the structure of the page and using them for something like a date can confuse users who rely on assistive technologies.

For anyone else looking for advice around this, the < time > element is the best way to semantically mark up dates. It’s also better for SEO as google search can read this date.

Examples of websites that use < time > element: