Semantic Dates in Wagtail Blog Posts

(Written because I couldn't find an easy guide online.)

Here's the code (formatted for readability):

<time datetime="{{page.first_published_at|date:"c"}}">

   {{page.first_published_at|date:"j F Y"}}

</time>

You can also use last_published_at if it is a page which has been updated.

WHY?!??!

Semantics. HTML5 contains the <time> element. The contents of it show up as normal running text, but the metadata gives information to anything that reads the source-code that the text relates to a date.

It's fairly easy to tell that <p>3rd of May</p> is a date - well, it's only easy if you know that you're only ever looking for English text formatted a specific way.

For example, does <p>3/5</p> mean three-fifth, or does it mean 3rd of May? Or, are you American, and it means 5th of March?

So, we can use a <time> element with the datetime= metadata. The datetime tag takes an ISO8601 string.

Luckily, we don't have to write it out by hand. Django has a built-in template for that.

Hey presto! Your blog posts now contain machine-readable data about when they were published.