在语义上正确的方法来添加非节元素(HTML)的标题和字幕?

时间:2018-12-02 03:23:30

标签: html html5 semantic-markup html-heading

哪些html元素最适合在与显式或隐式网站部分无关的组件中添加标题和副标题,例如表格或图形标题,卡片等?

根据W3,不建议为字幕添加标题:

  

h1-h6元素不得用于标记小标题,副标题,替代标题和标语,除非打算用作新节或小节的标题。

但是似乎标题标记也不应在节上下文之外使用:

  

标题内容定义了节的标题(无论是使用节内容元素显式标记,还是标题内容本身所隐含)。

这是否意味着在下面的示例中使用<h4>是不正确的,而必须使用<div>呢?

 <figcaption>
     <h4>Title</h4>
     <div class="byline">Byline</div>
     <p>Some description.</p>
 </figcaption>

1 个答案:

答案 0 :(得分:0)

好问题。但是,您错过了一件事,从您的问题标题中可以明显看出,它指的是“非分段元素”。 figure 元素一个 sectioning root 元素。这些是有趣的元素,因为它们被认为是“周围流程的一部分”(引用 the spec),但“这些元素内的部分和标题对其祖先的轮廓没有贡献”。

所以,也许令人惊讶的是,您绝对可以在 figcaption 中使用标题。它将形成父节的文档大纲的一部分。做与不做完全取决于您。

如何标记副标题的问题确实是一个 separate question,但它是一个卷曲的问题。 hgroup 元素应该处理这个问题,但 W3CWHATWG 似乎无法就它是否已被弃用达成一致。是的,正如你所说,W3C 给出了一些关于如何在后 hgroup 时代格式化副标题的advice。他们可接受的示例包括:

  1. 将标题元素(h1h2 等)粘贴在 header 元素内,并使用 p 元素作为副标题。
  2. 将副标题放在标题元素中,并使用 span 元素将其设置为与主标题不同的样式。

第一个类似于您的示例,如果父元素是 sectioning content 元素(articlesectionaside 或 {{3 }}) 或 nav 元素(sectioning rootblockquotedetailsdialogfieldsetfigure)。跨度方法是一种有效的替代方法。