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

Question

许多新闻网站都有一些小标题＆＃34;在每篇文章标题之前（如下面的Guardian和FT截图所示）。有时，这是指向文章类别/标签/列的链接，有时它只是一段静态复制品，用于为标题提供背景信息。记者经常将其称为“踢球者”。

目前我只是使用div.kicker对此进行标记，但是否有更合适的语义元素可供使用？

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

Answer 1

没有。真的没有一个更合适的元素，你已经得到的就是好的。

请注意，语义HTML本身并不是目标，而是实现媒体独立性的方法。因此，您应该考虑的是如何在由图形UI之外的其他媒体呈现或使用内容时体验内容。

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

Answer 2

我会使用h?标记，其中的数字与标题元素中的数字相比较低。

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

这也是facebook如何标记其文章（https://developers.facebook.com/docs/instant-articles/reference/cover/）

Answer 3

您可以使用<article>

  

4.3.2 article元素

     

文章元素represents完整或自包含，   文档，页面，应用程序或站点中的组合，即   原则，可独立分发或可重复使用，例如在   联合。这可以是论坛帖子，杂志或报纸   文章，博客条目，用户提交的评论，交互式小部件   或小工具，或任何其他独立的内容项。

和<section>元素

  

4.3.3 section元素

     

section元素表示文档的通用部分或   应用。在这方面，一节是一个主题分组   内容，通常带有标题。

用于标记并在HTML标记中包含描述<article>和<section>元素内容的结构化数据;例如，使用可以解析为HTML Microdata的JSON，请参阅How to extract/parse HTML using Microdata。