2.1 HTML figure 与 figcaption 的基本概念
2.1.1 figure 的定义
在HTML中，figure 是一个语义化的容器元素，用于把一张图片及其相关描述组合在一起，形成一个独立的内容单元。通过使用 figure，文档结构变得更清晰，浏览器可以更好地理解这是一组互相关联的元素，而不是单纯的图片标签。figure 的存在为后续的可访问性和语义化排版提供了基础。
把图像、说明和其他相关信息放置在同一个 figure 中，可以提高页面的可读性与可维护性。对于搜索引擎而言，这种结构让图像及其上下文的关系更加显性，有助于提取与图片相关的文本信息。
2.1.2 figcaption 的作用
figcaption 是用于对 figure 中图像进行文本描述的专用子元素。它承担图注、出处、注释等功能，赋予图片一个明确的文本说明。
将描述放在 figcaption 中，可以让屏幕阅读器为用户提供连贯的图像上下文，同时也帮助搜索引擎把图像与文本描述建立直接关联，从而提升对图片的语义理解能力。
<figure><img src="path/to/image.jpg" alt="简短的图片替代文本"><figcaption>这是一段对图片的文本描述，包含关键信息与上下文。</figcaption>
</figure>
2.2 HTML figure 与 figcaption 在语义化排版中的角色
2.2.1 语义分组的优势
将相关的图像与描述放在一个 figure 中，可以实现清晰的语义分组，提升文档的结构化程度。语义化排版不仅对搜索引擎友好，也使得内容在不同设备上的呈现更一致。
这种分组还能帮助团队在维护内容时快速定位图像及其注释，降低误解与错放信息的概率。对可访问性而言，figcaption 的存在提供了稳定的文本线索，帮助辅助技术正确解读图像所承载的语义。
2.2.2 SEO 与可访问性协同作用
搜索引擎在解析网页时，会把 figure 与 figcaption 视为一个整体，图注中的关键词有助于提升相关性分值。与此同时，alt 属性 提供的替代文本是图像对无法查看的用户的关键信息，与 figcaption 构成互补关系。
综合来说，figure 与 figcaption 的组合提高了可访问性与可索引性，确保视觉内容在搜索引擎和屏幕阅读器中都具备清晰的语义定位。
2.3 结合图片和文字的最佳实践
2.3.1 结构与可读性
在设计图文混排时，优先使用 figure 包裹图片与图注，避免将描述直接散落在页面其他区域。这样的结构能让文本与视觉信息形成稳定的语义关系，提升整体可读性与维护性。
为了提高可访问性，务必为图片提供具备意义的 alt 文本，并将描述性内容放入 figcaption 中，避免只依赖视觉呈现来传达关键信息。
2.3.2 SEO 友好性与可访问性
在图文组合中，确保 figcaption 中包含与图片相关的关键词及上下文描述，有助于搜索引擎理解图片的主题。与此同时，alt 文本应简明扼要地概括图片内容，避免冗长信息。
通过合理的图文结构，可以提升图片在搜索结果中的可见性，并在富文本结果中获得更好的呈现机会。
2.4 实战示例：典型的 figure+figcaption 结构
2.4.1 静态图片示例
下面给出一个常见的静态图片结构示例，其中包含 figure、img 和 figcaption，便于在文章中作为图文对照使用。
<figure><img src="images/architecture.jpg" alt="现代建筑的外立面，夕阳下的轮廓"><figcaption>图1：现代建筑的外立面在夕阳中的轮廓，强调几何线条与光影对比。</figcaption>
</figure>
2.4.2 图文混排的响应式设计
在响应式场景中，图片尺寸需要随屏幕变化，srcset 与 sizes 有助于加载合适分辨率的图片，同时保持图注的可读性。
<figure><img src="images/eco-buildings-400.jpg"srcset="images/eco-buildings-400.jpg 400w,images/eco-buildings-800.jpg 800w"sizes="(max-width: 600px) 100vw, 50vw"alt="生态建筑的外观，绿色屋顶与光伏板"><figcaption>图2：生态建筑示例，展示了绿色屋顶和可持续材料的应用。</figcaption>
</figure>
2.5 常见错误与优化要点
2.5.1 常见错误
在实际开发中，常见错误包括未使用 figure 包裹图像与注释、忽略 figcaption 的可访问性、以及仅依赖图片的文本描述而没有提供替代文本。alt 文本不具描述性、或与图像内容不相关，都会削弱语义化效果。
另外，过度依赖视觉呈现来传达信息，而缺乏结构化的文本描述，也会对搜索引擎的理解造成障碍，降低页面的可索引性。
2.5.2 优化要点
要点包括：为图片提供有意义的 alt 文本、在 figure 内部使用 figcaption 提供充分的描述、避免将关键描述仅放在图片之外的区域、并结合响应式图片策略提升加载速度。
此外，确保图注包含与图片主题相关的关键词，有助于提升相关性；在合适的场景下使用具备描述性的语言，避免滥用关键字，以维护良好的用户体验和搜索排名。
