summary 属性在现代 html 中已废弃，主流浏览器忽略其语义，应改用 和 scope 属性提升可访问性。

summary 属性不能可靠描述表格用途，现代 HTML 中它已失效，别用。

浏览器控制台会警告：The 'summary' attribute on the 'table' element is obsolete.

Chrome、Firefox、Edge 等主流浏览器自 HTML5 起就完全忽略 summary，既不渲染，也不向屏幕阅读器传递信息。写 <table summary="用户订单列表"> 只会让代码显得过时，还可能干扰辅助技术对表格结构的解析。 <h3>真正起作用的是 <code><caption></caption> 和 scope 属性

可访问性依赖明确的语义关联，不是隐藏文本：

• <caption></caption> 必须作为 <table> 的第一个子元素，直接声明表格用途，例如 <code><caption>2024 年 Q2 用户退款申请汇总</caption>；
• scope="col" 用于列标题 <th>，告诉屏幕阅读器“这一列所有数据都属于这个字段”； <li> <code>scope="row" 用于行标题（如首列），适用于带分类标识的表格；
• 复杂表头（跨行/跨列）则需配合 headers 属性和 id 显式绑定。

为什么有人还在用 summary？常见误解与后果

有人误以为它能提升 SEO 或给开发者留备注，实际：


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• 搜索引擎不索引 summary 值，对排名无影响；
• 它不是注释字段，无法被 CSS 或 JS 安全读取（table.summary 在 DOM 中仍可读取，但已无语义意义）；
• 若表格没加 <caption></caption>，仅靠 summary，屏幕阅读器大概率报“未命名表格”，用户根本不知道这是什么表。

迁移建议：三步替换掉 summary

现有代码中搜 summary= 并替换：

• 把原 summary 文本内容移到 <caption></caption> 内；
• 确保 <caption></caption> 紧跟 <table> 开始标签； <li>为每个 <code><th> 补上 <code>scope（简单表用 scope="col" 或 scope="row" 即可）。 真正让表格被理解的，是结构本身 —— <caption></caption> 是起点，scope 是路径，而 summary 是一条早已被拆除的旧路。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！