HTML怎么用figure标签_html figure和figcaption用法【新手必读】-html教程-PHP中文网

figure用于标记可独立抽离、不影响主文档逻辑的内容块，如图表、代码示例、引文等；figcaption必须为首个或末个直接子元素，用以提供语义化标题，不可替代img的alt属性。

html怎么用figure标签_html figure和figcaption用法【新手必读】

figure 不是“给图片加标题的 div”，它只在内容真正独立、可抽离时才该用；乱套用反而破坏语义，还可能被屏幕阅读器误读。

判断标准只有一个：这段内容（图/代码/引用等）拿掉后，主文档逻辑是否依然完整？如果它只是装饰、配图说明正文某一句，就别用 figure。

✅ 适用：文章中插入一段独立的 <pre class="brush:php;toolbar:false;"><code></code> 示例，附带说明文字；学术论文里的实验折线图 + 图注；带出处的历史照片</pre>
❌ 不适用：产品页里“主图+‘点击查看大图’文字”；轮播图的每一张图；头像旁的昵称标签
⚠️ 注意：figure 内容被 CSS 移到侧边栏或附录时，figcaption 必须仍能准确描述它——所以标题里不能写“上图”“左侧示意图”这类上下文依赖词

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

正确：<figure><figcaption>...</figcaption><img></figure> 或 <figure><img><figcaption>...</figcaption></figure>
错误：<figure><img><p>说明</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></figure>（p 不是 figcaption）
错误：<figure><img><figcaption></figcaption><img></figure>（figcaption 不在首尾）

alt 是图像的**替代文本**（无图时显示、供屏幕阅读器朗读），figcaption 是它的**标题或上下文说明**（解释这张图在当前文档中扮演什么角色）。两者不互斥，要共存。

例如：<img src="chart.png" alt="2025年用户增长曲线图"> + <figcaption>图1：A/B测试组与对照组的月活增长率对比（数据来源：内部后台）</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，结果让语义变得模糊。宁可多花十秒想清楚“它离开这儿还能自己说清一件事吗”，再决定要不要用。