为非分段元素 (HTML) 添加标题和副标题的语义正确方法？答案

【问题标题】：Semantically correct way to add titles and subtitles for non-sectioning elements (HTML)?为非分段元素 (HTML) 添加标题和副标题的语义正确方法？
【发布时间】：2018-12-02 03:23:30
【问题描述】：

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

根据 W3，标题不建议用于字幕：

h1–h6 元素不得用于标记副标题、副标题、替代标题和标语，除非打算用作新部分或小部分的标题。

但标题标签似乎也不能在章节上下文之外使用：

标题内容定义了一个部分的标题（无论是使用分节内容元素显式标记，还是由标题内容本身暗示）。

这是否意味着下面示例中<h4> 的用法不正确，必须改用<div>？

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

【问题讨论】：

这取决于更广泛的背景。忽略 figure 和 figcaption 元素，h4 元素相对于它之前的标题是否有意义？ h4 标题和其后的文本是否代表由其前面的 h3 元素创建的部分的子部分？如果是这样，那很好。否则，最好避免使用它。
那么这是否意味着可以使用 h4 作为卡片 UI 元素的标题/标题，因为每张卡片都代表某个较大容器的逻辑子部分（例如 <main> 部分）？
不是<main>。 <main> 不是切片元素。在这种情况下，较大的容器将是 <body>。而<h4> 仅适用于包含部分以<h3> 为首的情况。这又应该在以<h2> 等为标题的部分中

标签： html semantic-markup html-heading

【解决方案1】：

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

因此，也许令人惊讶的是，您绝对可以在 figcaption 中使用标题。它不会构成父部分的文档大纲的一部分。做与不做完全取决于你。

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

将标题元素（h1、h2 等）粘贴在 header 元素内，并使用 p 元素作为子标题。
将副标题放在标题元素中，并使用span 元素使其样式与主标题不同。

第一个类似于您的示例，如果父元素是 sectioning content 元素（article、section、aside 或 nav）或 sectioning root 元素（ blockquote、details、dialog、fieldset、figure、td)。 span 方法是一种有效的替代方法。

【讨论】：