What the header element can be used for

You might be thinking – it is for the header of a page or section, end of article. It isn’t. I didn’t really think there were other uses for it until a conversation on Twitter with Derek Johnson last December.

I asked “What is the most semantic way to markup a tldr; section in HTML? aside? Is it just a paragraph of text?”

And he replied saying:

<header> or <footer>, <header> is for introductory content and <footer> is for information about the parent section(ing root).

Thanks so much for that slap of semantic goodness Derek!

So, lets dig into this a bit more.

The spec talks about the <header> as:

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

And goes on to note:

A header element is intended to usually contain the section’s heading (an h1–h6 element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

So what these are saying is that whichever section we are in we can use <header> to denote any introductory content. As their note says, normally this is the heading, but it could really be anything you need to be introductory.

The upshot of this is that perhaps we could be marking up things like tldr; and short introductions better. I can certainly see a case where assistive technologies might decide to deprioritise content held within there in favour of the meat of the article.

Unfortunately at the moment if you are a WordPress user like me your hands are pretty tied as this isn’t something offered out of the box or by any plugins I have found, but certainly something to consider if you have full control over your content.