How to correctly mark up a headline "kicker"

2022-01-01

(Update log)

2022-01-08: Added dictionary link to “kicker” term, thx Joschi; added “eyebrow” based on comment by Eric

2022-11-04: Added link to an article about new semantic ways to do this

Favouriting:

#a11y friends: pattern or anti-pattern?

<p id="k">Kicker</p>

<h2 id="h" aria-labelledby="k h">Heading</h2>
<p>Lorem ipsum …</p>

instead of:

<h2>Kicker</h2>

<h3>Heading</h3>
<p>Lorem ipsum …</p>

Any major cons? Thanks!

— Joschi Kuphal 2021-12-29

Joschi Kuphal and some of his contacts discuss the optimal HTML semantics for a “kicker” (the little pre-heading on top of a headline, sometimes also called “eyebrow”; “Dachzeile” in German) from an accessibility perspective. Some very interesting nuggets and perspectives…

I have included the “kicker” in simple <span> tags as part of the headline before, but of the solutions discussed in the thread, I almost prefer the idea that the “kicker” (cf. MerriamWebster) is actually something that semantically belongs below the headline and could the be lifted only visually.

Addition, 2022-11-04: The following article suggests a standards-compliant way of achieving this:

Subheadings, subtitles, alternative titles and taglines in HTML tpgi.com