如何在HTML中语义上标记标题前的“踢球者”？

Question

许多新闻网站在每个文章标题之前都有一个“标题前”（如下面的《卫报》和《金融时报》的截图所示）。有时，这是指向文章的类别/标签/列的链接，而其他时候，它只是为标题提供上下文的静态显微镜。记者经常称其为“踢球者”。

目前，我只是使用a div.kicker进行标记，但是还有更合适的语义元素可以使用吗？

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

Answer 1

否。确实没有更合适的元素，您所拥有的已经很好。

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

例如，考虑一下屏幕阅读器用户。他们通常要做的一件事是打断正在阅读的文本，然后跳到下一个标题元素。如果他们在这种情况下这样做，他们将错过听到踢球的声音。有关系吗 那是对你的判断。在上面给出的示例中，我认为事实并非如此。仅标题中就有足够的信息，使他们能够决定是否阅读故事。另一方面，如果您认为踢球者包含关键信息以使他们能够做出决定，则您可能希望将踢球者放入标题元素中。