HTML figure标签和figcaption用法（新手必读）

就行。

• 适用场景：文章中插入一段独立的

  代码示例，附带说明文字；学术论文里的实验折线图加上图注；带出处的历史照片。这些内容抽走后，正文不会断片。

• 不适用场景：产品页面里“主图 + ‘点击查看大图’文字”；轮播图的每一张图；头像旁边的昵称标签。这些内容都是页面的组成部分，抽走了页面就缺胳膊少腿。
• 注意事项：如果figure的内容被CSS移到侧边栏或附录里，figcaption的标题必须仍然能准确描述它。所以标题里千万别写“上图”“左侧示意图”这类上下文依赖词——换了位置，读者就不知道你指的是哪张图了。

figcaption的位置和嵌套规则

figcaption必须是figure的直接子元素，而且只能放在第一个或最后一个位置。中间可以放其他内容（比如多个img），但标题绝对不能夹在中间。

• 正确写法：

• 错误写法：

  • 说明

    （p不是figcaption，搜索引擎和辅助技术不认账）

  • （figcaption不在首尾，违反了嵌套规则）

alt和figcaption到底是什么关系？

很多人容易混淆这两个属性。简单说，alt是图像的替代文本（图片加载失败时显示、供屏幕阅读器朗读），而figcaption是它的标题或上下文说明（解释这张图在当前文档里扮演什么角色）。两者不互斥，应该共存。 举个例子：搭配。如果alt已经写得很详细了（比如长描述），figcaption可以更简略，聚焦在编号、来源、类型这些元信息上。 千万别用figcaption替代alt——没有alt的图，对使用屏幕阅读器的用户来说就是“一张没名字的空白”。这是可访问性的大忌。

兼容性和样式控制要点

浏览器兼容性倒是不用太担心。IE9+和所有现代浏览器都支持figure和figcaption。但默认样式极其简陋（figcaption就是个普通的块级文本），全靠CSS来控制外观和布局。 这里有几个常见坑需要注意：

• 直接写figcaption { text-align: center; }会把整段文字居中，但如果内容很长、换行了，效果会非常难看。建议用display: flex或max-width来约束宽度。
• 不要依赖figure自动实现“图文环绕”——它本身不带浮动逻辑，得用float或display: grid配合。
• SEO和可访问性收益不会自动发生。只有当你写figcaption的文字真正描述了内容的本质（而不是敷衍地写“一张图”），并且结构严格符合规范时，辅助技术和搜索引擎才能可靠地识别。

说到底，最容易被忽略的其实是“自包含性”的判断。很多人看到“有图有文”就条件反射地套上figure，结果反而让语义变得模糊。说白了，多花十秒想清楚：“这玩意儿拿掉之后，它自己还能说清楚一件事吗？”想明白了再决定用不用。