《Web前端开发精品课 HTML与CSS进阶教程》——2.3 图片语义化

本节书摘来自异步社区《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元素

https://yqfile.alicdn.com/26cc9c2cbd087955b09f96817836a511aee67fac.png" >

对于如图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这两个元素来实现，从而使得页面的语义更加良好。