如何在 HTML 中语义标记 pre-headline ‘kicker’？

Question

许多新闻网站在每篇文章的标题前都有一点 "pre-headline"（如下面来自卫报和英国《金融时报》的截图所示）。有时这是文章 category/tag/column 的 link，有时它只是一个静态缩微副本，用于为标题提供上下文。记者经常称之为'kicker'.

目前我只是使用 div.kicker 来标记它，但是有没有更合适的语义元素可以使用？

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

Answer 1

我会使用一个 h? 标签，其中的数字比标题元素上的数字重要性低。

因此，如果您使用 h3 作为标题，我会使用 h4 或 h5。（如果你使用字幕，踢球者应该更低）

这也是 Facebook 标记其文章的方式 (https://developers.facebook.com/docs/instant-articles/reference/cover/)

Answer 2

没有。确实没有更合适的元素，您已经拥有的就可以了。

请注意，语义 HTML 本身并不是目标，而是实现 媒体独立性 的一种手段。因此，您应该考虑的是，当内容被除图形 UI 以外的其他媒体呈现或使用时，将如何体验内容。

例如，考虑屏幕 reader 用户。他们通常做的一件事是打断正在阅读的文本并跳到下一个标题元素。如果他们在这种情况下这样做，他们将错过听到踢球者的声音。那有关系吗？这是对你的判断。在你上面给出的例子中，我的意见是它没有；仅标题中就有足够的信息让他们能够决定是否阅读这个故事。另一方面，如果您认为 kicker 包含他们能够做出该决定的关键信息，您可能希望将 kicker 放在标题元素中。

Answer 3

您可以使用<article>

4.3.2 The article element

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

和<section>个元素

4.3.3 The section element

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

用于标记，并在 HTML 标记中包含结构化数据，描述 <article> 和 <section> 元素的内容；例如使用 HTML Microdata, which can be parsed to JSON, see .

如何在 HTML 中语义标记 pre-headline ‘kicker’？

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

html

semantic-markup