How to semantically mark up a pre-headline ‘kicker’ in HTML?

Many news websites have a little "pre-headline" before every article headline (as shown in screenshots from Guardian and FT, below). Sometimes this is a link to the article's category/tag/column, other times it's just a piece of static microcopy to give context to the headline. Journalists often call it a 'kicker'.

Currently I'm just using a div.kicker to mark this up, but is there a more appropriate semantic element to use?

<header>
    <div class="kicker">Science</div>
    <h3>New frontier as astronomers witness neutron stars colliding</h2>
</header>

Solution

No. There really isn't a more appropriate element and what you've got already is fine.

Note that semantic HTML is not a goal in itself, but a means to achieve media independence. So what you should be considering is how the content will be experienced when presented or consumed by other media than a graphical UI.

For example, think about screen reader users. One of the things that they commonly do is to interrupt the text that's being read and skip on to the next heading element. If they do that in this instance, they will miss hearing the kicker. Does that matter? That's a judgement call for you. In the examples you give above, my opinion would be that it doesn't; that there's enough information in the heading alone for them to be able to decide whether to read the story or not. If on the other hand, your view is that the kicker contains critical information for them to be able to make that decision, you might want to put the kicker inside the heading element.