legend标签只能用于fieldset，不可用于table；table应使用caption作为合法标题，二者语义边界明确，混用将破坏可访问性。
legend 标签不能用于 HTML 表格（<table>）中说明用途——它只对 <fieldset> 有效。试图在表格里写 <legend>订单信息</legend> 不仅无效，还会导致 HTML 验证失败，浏览器会将其当作孤立标签忽略或错误嵌套处理。
为什么 legend 不能用在 table 里
legend 是 <fieldset> 的专属子元素，HTML 规范明确限定其父容器只能是 <fieldset>。表格结构中没有语义分组能力的原生容器，<caption> 才是 <table> 的合法标题标签。
-
<caption>必须是<table>的第一个子元素，作用就是说明表格用途，例如：<caption>用户订单历史列表</caption> -
<legend>放在<table>内任何位置（开头、中间、结尾）都不合法，解析器会自动将其“踢出”到表格外部，DOM 结构错乱 - 部分浏览器可能渲染出文字，但不会关联到表格，更不会提升可访问性——屏幕阅读器不会把
legend和table绑定为“标题-内容”关系
table 的正确标题方案：用 caption 而不是 legend
要说明表格用途，唯一符合标准且具备可访问性的做法是使用 <caption>：
<table> <caption>2026年Q2销售数据汇总（单位：万元）</caption> <thead><tr><th>月份</th><th>销售额</th></tr></thead> <tbody><tr><td>4月</td><td>128.5</td></tr></tbody> </table>
-
<caption>默认显示在表格上方居中，可通过 CSS 控制位置（如caption-side: bottom） - 它天然被屏幕阅读器识别为表格标题，焦点进入表格时会自动朗读
- 不支持条件渲染或动态移除——如果需要隐藏视觉标题但保留可访问性，用
visually-hidden类包裹<caption>，而非display: none
什么时候真该用 legend？只在 fieldset 场景下
如果你实际想表达的是“表单内的分组用途”，而不是“表格用途”，那才轮到 legend 出场：
立即学习“前端免费学习笔记（深入）”；
- 场景：一组
<input type="radio">选项（如“支付方式”）、地址字段块、多步骤表单的某一步骤 - 必须满足：包裹控件的容器是
<fieldset>，且<legend>是它的第一个子节点，例如：<fieldset><legend>配送时间偏好</legend><input type="radio" name="time">...</fieldset> - 错误示范：
<table><tr><td><fieldset><legend>发票信息</legend></fieldset></td></tr></table>—— 这会让legend在 DOM 中脱离fieldset父级，可访问性失效
最常被忽略的一点：很多人看到“说明用途”就直觉选 legend，但没先判断容器类型。表格用 caption，表单分组用 legend——二者语义边界清晰，混用等于放弃可访问性基础保障。
