以当今现代方式使用“标题”HTML 元素的最合适方式是什么？答案

【问题标题】：What is the most appropriate way to use "caption" HTML element in today's modern way?以当今现代方式使用“标题”HTML 元素的最合适方式是什么？
【发布时间】：2010-11-13 08:16:20
【问题描述】：

它们是否与 CSS 一起使用？（非表格？）

它们是如何使用的？

请举例。

【问题讨论】：

标签： html css image templates caption

【解决方案1】：

CSS 标题端属性用于指定标题相对于表格的位置（即表格上方或下方）。

Syntax:   caption-side: <value> Possible Values:  

* top
* bottom
* inherit
初始值：Top 适用于：继承的带有标题的表：是媒体：视觉示例：

标题{标题侧：底部；
宽度：自动；文本对齐：左； }

<style type="text/css">
caption {
  caption-side: bottom;
  width: auto;
  text-align: left;
  }
</style>
<table border="1">
  <caption>This is the caption</caption>
  <tr>
    <td>Try changing the values to see the effect it has on the position of the caption.</td>
  </tr>
  <tr>
    <td><b>Note:</b> If this is not working, your browser might not support the caption-side property. At the time of writing, browser support for the caption-side property was limited.</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

这个元素应该用于提供一个简短的标题桌子;它不应该用于提供表的描述结构，就像你可能对表格摘要属性。

caption 元素提供了一种以可视方式标记以下table 内容的方法（与不可见的table 的摘要属性不同）。它有一个特定于元素的属性，align，它非常初级且不完全受支持（它也已被弃用，因此通常应避免使用）。

每个table 只能使用一次caption 元素，并且必须紧跟table 开始标记。

虽然标题元素似乎是标记table 的最合适的标记，但实际上它的意图是label 一个数据表，就像您为书中的图片提供标题一样。然而，在大多数印刷媒体中，插图、图像和表格的标题通常出现在项目之后，而标题元素出现在表格之前。 caption 的不良样式选项与 CSS 和较差的对齐支持相结合，导致许多人转而选择在具有标题元素 1-6 的表格之前（例如，h3 元素）。这使某些使用辅助技术（例如屏幕阅读器）的人更容易在文档中从一个标题跳转到另一个标题（有一些方法可以按标题导航，也可以在页面上显示标题列表）。但是，应该注意的是，标题实际上是为了指示该标题之后的整个部分的内容，直到下一个标题所在的位置，而不是像caption 那样的页面的一个离散部分。 caption 元素是识别 table 的正确标记，但如果您看到人们使用标题代替，请不要感到惊讶。

示例

这是一个表格标题，提供视觉摘要和标题：

<table border="1">
  <caption>Interest Rates for Young Saver Accounts</caption>
  <tr>
    <th>Account Type</th>
    <th>Interest Rate</th>
  </tr>
  <tr>
    <td>Smart</td>
    <td>From 2%</td>
  </tr>
  <tr>
    <td>Young Saver</td>
    <td>From 1.6%</td>
  </tr>
</table>

【讨论】：