Skip to content

Wherefore article?

Been looking at Bear, a blogging platform that nearly meets my requirements (Markdown, minimal but stylable markup, a web editor, optional tags). I say nearly. As ever, it’s other people’s code that niggles, in Bear’s case an anchor wrapping a heading, adding an <i> to timestamps and its decision not to wrap posts in an article element.

This raises the question of whether it matters if you use article or not. After all, you don’t need an article to write valid HTML.

Browsers generally style an h1 differently when it occurs within an article, making it smaller than when it just sits within main. But that’s not particularly important as chances are you’ll be styling your article’s title anyway.

Where it could be important is when the post is interpreted by an external agent, such as Safari or Firefox’s reader modes, a read later service such as Instapaper, an app such as NetNewswire, or a screenreader. Does using an article affect how the post is displayed or read?

I did a little research and tested this post which doesn’t use an article against this, which does use an article.

The short answer is it doesn’t make much difference, but probably enough to warrant usage.

It made no difference if I used an article in NetNewswire, Instapaper and Safari and Firefox reader mode. All were able to figure out that the content within the main element was a post, and displayed it in the same way as when I used an article. It is worth noting that using meta data such as microformats is helpful if you want these services to display author names and publication dates.

However, screenreaders do (sometimes, and in different ways) make use of article, ditto Apple’s WatchOS. This becomes particularly useful if you’re displaying several articles on a single page – some screenreaders will list them as separate entities that readers can quickly navigate. While screenreaders do expose the main element, you can only have one on any page.

So Bear would possibly benefit from using the article element to markup posts. Besides, there may be other agents that make use of it, or screenreaders might change their support. Herman will no doubt be delighted with another Github issue.