caption标签是table的唯一语义化标题，必须作为其第一个且仅有的子元素，位于开始标签后、其他子元素前，否则HTML无效并影响可访问性。

caption 标签在 HTML5 中用于为表格（table）提供**唯一的、语义化的标题**，它必须作为 table 元素的**第一个子元素**，且只能出现一次。

caption 的语义化位置要求

HTML5 明确规定：caption 必须直接位于 table 开始标签之后、任何其他子元素（如 thead、tbody、tr）之前。违反此结构会导致 HTML 无效，影响可访问性与语义解析。

• ✅ 正确位置：...>...

  销售数据汇总

• ❌ 错误示例：...

  ...

  （位置错误，失去语义）
• ❌ 错误示例：

  A

  B

  （重复使用，仅允许一个）

caption 与视觉呈现的关系

默认情况下，浏览器将 caption 渲染在表格上方居中位置，但这只是默认样式。其语义作用远大于外观——屏幕阅读器会将其识别为表格的“主标题”，并优先朗读，帮助视障用户快速理解表格用途。

• CSS 可通过 caption-side 属性控制显示位置（top / bottom），不影响语义有效性
• 不推荐用
  或

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载

  模拟标题，那样无法被辅助技术正确关联到表格
• 即使隐藏了视觉样式（如 visibility: hidden），只要保留在合法位置，仍具语义价值

caption 的内容与可访问性建议

好的 caption 应简洁、具体、信息明确，避免模糊表述（如“表格1”），并尽量包含关键上下文（时间、范围、指标等）。

• ✅ 推荐：2024年Q1华东地区产品销量（单位：台）
• ❌ 不推荐：销量表（过于笼统）
• 可配合 aria-labelledby 或 aria-describedby 增强复杂表格的说明，但不能替代 caption

caption 是表格语义结构的基石，位置固定、功能唯一、不可替代。写对位置，就完成了可访问性和语义化最关键的一步。