在表格内外使用标题元素时的标题顺序

Question

根据 HTML5 规范，

th

元素中不允许包含标题元素。然而，这在标题图中提供了一个奇怪的顺序，具体取决于表格周围的内容。

在这种情况下，表主题 2 可能具有某些内容（在第二个

td

中），并且可以有副标题。为了遵循之前布置的标题结构，您可能需要在此处使用 h3。但如果您稍后使用屏幕阅读器工具，您会错过这个 h3 是表主题 2 的副标题这一事实。

<h2>Lorum Ipsum</h2>
<p>Dolor sit amet, consectetur adipiscing elit.</p>

<table>
   <thead>
      <tr>
         <th>Table topic 1</th>
         <th>Table topic 2</th>
         <th>Table topic 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Lorum ipsum...</td>
         <td>
            Dolor sit amet...
            <h3>Table topic 2 Subheading</h3>
            Consectetur adipiscing elit...
         </td>
         <td>Donec malesuada congue...</td>
      </tr>
   </tbody>
</table>

这里正确的解决方案是什么？使用H3？或者使用 H4 来代替，至少表示中间有一些东西，即使该“东西”没有出现在标题结构中。

Answer 1

不要跳过标题级别。标题元素（

<h2>

、

<h3>

等）有助于定义文档大纲。表格标题元素

<th>

对文档大纲没有贡献。

虽然在表格单元格中包含标题元素是有效的 HTML，但值得考虑是否有更合适的替代方法来标记该内容，以便文档大纲不会渗透到表格的内容中。如果没有看到您的真实内容，很难知道该采取什么方法，但需要考虑的一些选项是：

• 更复杂的表格，使用多组表格标题来传达子结构
• 嵌套表
• 根本不使用表格，而是使用其他语义元素来显示内容类型之间的关系