使用figure和figcaption标签可将图片与标题关联,提升可访问性和语义化结构,配合alt属性优化辅助技术识别,优先推荐此标准方法实现图文说明关系。

在HTML中,图片与标题的关联主要是通过语义化标签和适当的结构来实现,让内容更清晰、可访问性更强。虽然图片本身不能直接“绑定”标题,但可以通过合理使用figure和figcaption标签自然地将图片与其说明文字(即标题)关联起来。
使用 figure 和 figcaption 标签
figure元素用于包裹独立的内容,如图片、图表、代码片段等,而figcaption则是为其提供标题或说明的标签,通常放在figure内部,位于图片前后均可。

这种方式不仅结构清晰,还提升了网页的可读性和无障碍支持,屏幕阅读器能识别figcaption作为图片的说明。
为 img 添加 alt 属性
虽然alt属性不是标题,但它在图片无法加载时显示,并被辅助技术用来描述图片内容,因此是关联图片信息的重要部分。
立即学习“前端免费学习笔记(深入)”;
- alt 文本应简洁明了,准确描述图片内容
- 若图片仅为装饰,可设
alt=""以供屏幕阅读器跳过 - 避免重复
figcaption中的文字,除非有必要强调
配合 aria-labelledby 实现更复杂的关联(进阶用法)
在需要与其他元素联动的场景下,可通过ARIA属性手动建立关联。例如,将图片的aria-labelledby指向一个标题元素的ID。
城市夜景航拍

这种方法适合复杂布局,但推荐优先使用figure+figcaption这种语义化方式。
基本上就这些。使用figure和figcaption是最标准、最简单的方法,既符合HTML规范,又提升用户体验和SEO效果。不复杂但容易忽略。











