才是标记图片/媒体图例的正确元素，必须嵌套在内且为首个或末个子元素；仅限内作表单分组标题，二者语义不同，不可混用。

HTML 里没有专门的“图例说明”元素

直接说结论：<legend></legend> 只能用在 <fieldset></fieldset> 里，且只负责表单分组标题，不是通用图例；<figcaption></figcaption> 才是真正用来标记图片/媒体图例的，但必须嵌套在 <figure></figure> 内部——这两个标签常被混用，结果语义出错、屏幕阅读器读不准、SEO 也打折。

什么时候该用 <figcaption></figcaption>

只在需要为一张图、一段代码、一个图表或嵌入式媒体（比如 <img alt="HTML怎样标记文档的图例说明_HTML标记文档图例说明元素【元素】" >、<svg></svg>、<pre class="brush:php;toolbar:false;">&lt;/code&gt;）提供独立、可访问的说明文字时才用。它不是装饰性标注，而是内容的一部分。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;&lt;figcaption&gt;&lt;/code&gt; 必须是 &lt;code&gt;&lt;figure&gt;&lt;/code&gt; 的第一个或最后一个子元素，不能放中间&lt;/li&gt; &lt;li&gt;如果图有标题+说明，建议把标题用 &lt;code&gt;&lt;h3&gt;&lt;/code&gt; 放在 &lt;code&gt;&lt;figcaption&gt;&lt;/code&gt; 里，而不是另起一行&lt;/li&gt; &lt;li&gt;不要为了“看起来像图例”硬套 &lt;code&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/code&gt; —— 比如表格下方那行小字说明，用 &lt;code&gt;&lt;caption&gt;&lt;/code&gt; 更合适&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;&lt;code&gt;&lt;legend&gt;&lt;/code&gt; 的唯一合法位置&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;legend&gt;&lt;/code&gt; 不是图例，是表单控件分组的标题，只能出现在 &lt;code&gt;&lt;fieldset&gt;&lt;/code&gt; 开始处。浏览器会把它渲染在边框左上角，视觉上像“图例”，但语义和用途完全不同。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill10595&quot; title=&quot;htmlppt.skill&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg&quot; alt=&quot;htmlppt.skill&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill10595&quot; title=&quot;htmlppt.skill&quot;&gt;htmlppt.skill&lt;/a&gt; &lt;p&gt;把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill10595&quot; title=&quot;htmlppt.skill&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt;常见错误：把图表下方说明写成 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;fieldset&gt;&lt;legend&gt;数据来源：国家统计局&lt;/legend&gt;&lt;/fieldset&gt;&lt;/li&gt; &lt;li&gt;这样会导致辅助技术误判为表单控件组，键盘焦点行为异常&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;legend&gt;</pre> 里不能放链接、按钮等交互元素，否则部分屏幕阅读器会跳过 <h3>纯文本图例说明怎么写才稳妥</h3> <p>如果只是段落里顺带解释某个术语或符号（比如“● 表示已完成，○ 表示未开始”），别强行套语义标签。用普通段落 + 简单 HTML 就够了。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>符号对齐用 <code><span></span> 配合 CSS（比如 display: inline-block; width: 1.2em;），别依赖表格或 <pre class="brush:php;toolbar:false;"></pre>

避免用 <dl></dl> 做图例列表——除非真是定义术语，否则语义过重，CSS 控制成本高

如果图例要随图表一起响应式缩放，优先考虑 SVG 内嵌 <title></title> 或 ARIA label，而不是 HTML 元素堆砌

事情说清了就结束。最常被忽略的是：图例是否属于内容本身——是，就用 <figcaption></figcaption>；是表单结构一部分，才用 <legend></legend>；其余多数情况，老老实实用段落加样式更稳。