本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第2章，第2.3节，作者： 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.3 图片语义化
在HTML中，我们使用img标签来表示图片。对于图片的语义化，我们从以下两个方面来深入探讨一下。
（1）alt属性和title属性。
（2）figure元素和figcaption元素。
2.3.1 alt属性和title属性
img标签有两个重要属性：alt和title。
alt属性用于图片描述，这个描述文字是给搜索引擎看的。并且当图片无法显示时，页面会显示alt中的文字。
title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片上时，会显示title中的内容。
语法：
<img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">
说明：
搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会查看HTML代码，通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签，我们一定要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。
请一定要注意：alt属性是img标签必需属性，一定要添加；title属性是img标签可选属性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。
2.3.2 figure元素和figcaption元素
对于如图2-4所示的这种“图片+图注”的效果，我们可以使用如下代码来实现。
<div class="img-list">
<img src="" alt=""/>
<span>HTML入门教程</span>
<div>
但是这种实现方式的语义并不好。在HTML 5中，引入了figure和figcaption两个元素来增强图片的语义化。
语法：
<figure>
<img src="" alt=""/>
<figcaption></figcaption>
</figure>
说明：
figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。
