Scott O’Hara 深入探讨了 <figure> 和 <figcaption> 元素。必须喜欢一个好的 HTML 深入研究。
我在 CSS-Tricks 上的几乎每篇博文中都使用它们，正如我所怀疑的那样，我一直基本上用错了。我最初的想法是，figcaption 和 alt 属性一样好。我通常用它来描述图片。
<figure>
<img src="starry-night.jpg" alt="">
<figcaption>The Starry Night, a famous painting by Vincent van Gogh</figcaption>
</figure>我故意省略了替代文本，因为 figcaption 说出了我想在 alt 文本中说的话，我认为重复它会很烦人（对屏幕阅读器用户来说）而且没有必要。Scott 说这不好，因为空替代文本使图片完全无法被某些屏幕阅读器发现，因此图形就没有描述任何内容。
我认为，正确答案是做更多工作
<figure>
<img src="starry-night.jpg" alt="An abstract painting with a weird squiggly tree thing in front of a swirling starry nighttime sky.">
<figcaption>The Starry Night, a famous painting by Vincent van Gogh</figcaption>
</figure>这是一个好目标，我应该在这方面做得更好。只是懒惰妨碍了，而且懒惰让我希望有一种模式可以让我在一次写作中写出对两者都有效的描述。也许就像 Nino Ross Rodriguez 今天分享的那样，人工智能 可以减轻一些负担。但这有点不是重点。重点是你不能写一次，因为 <figcaption> 和 alt 做的事情不同。
感谢您对此进行澄清。我一直想知道“alt”属性与包含 figcaptions 的图形中的图片的正确用法。现在我知道了。
我对图形元素有一个问题，那就是是否可以只在它们自身上使用它们……比如作为“卡片”模块的标记或其他东西……
我认为规范指出，图形应该与文档中的某些文本内容相关……但我看到很多图形本身的使用，而没有任何与相应文本的链接。
图形元素允许流动内容（大多数包装文本的标签，或嵌入内容，如图片），并带有一个 单个 figcaption，作为第一个或最后一个元素。
Figcaption 也不打算替换 alt 标签——它们有不同的含义。替代标签用于解释图片（辅助设备会告诉用户有一个图片，然后是替代标签来解释它；一个空白的替代标签永远不会提到有一个图片，所以 figcaption 就会“突然冒出来”），这既被辅助设备使用，也被 SEO 使用（如果你关心搜索结果，这一点非常重要）。Figcaptions 更像是标签，对图形内部的内容进行标记。
https://mdn.org.cn/en-US/docs/Web/HTML/Element/figure
此外，最重要的一点是，图形是分节根。这意味着内容将从页面流中删除——就像一个旁注。如果内部内容没有特定点（或被专门提及）在内容中，则没关系。但是，如果内容属于内容的特定部分（例如，浮动在相关段落文本中的图片），则 不应 使用图形。