N001 图片中的alt属性和title属性



由于经常搞混这两个属性,因此将其归纳总结来提醒自己:

主要功能

虽然本文是在讨论alt属性和title属性在<img>标签中的使用,但仍需注意的是:alt属性一般用于<img>等个别标签,title属性可用于大部分标签。具体功能如下:

  1. alt属性:图片文本替换,用于SEO(搜索引擎优化)。提供关键词可以为搜索引擎提供判断依据。图片无法显示时替换也能发挥作用。
  2. title属性:链接的悬浮提示,用于UEO(用户体验优化)。用户无需点击链接即可预先知道链接内容,避免了多余的操作和页面加载。

注:XHTML规定<img>标签必须使用alt属性,以便帮助视觉障碍用户、屏幕阅读器用户、显示器有问题用户或者图片链接本身不正确的情况下可以知道图片的内容;而title属性并没有强制的使用要求。

基本用法

IE浏览器中alt属性和title属性均可展示悬浮提示信息,容易搞混。alt属性的本质是替换,title属性的本质是提示,不应该乱用,因此以下内容是在IE浏览器环境下测试。

虽然alt一般用于图片,title用于链接,但由于title的使用范围很广泛,因此在图片的属性使用中有以下四种用法:

<!--method 1-->
<img src="image url" alt="alternative text" />

<!--method 2-->
<img src="image url" alt="alternative text" title="advisory information" />

<!--method 3-->
<a href="hypertext source link" title="advisory information">
    <img src="image url" alt="alternative text" />
</a>

<!--method 4-->
<a href="hypertext source link">
    <img src="image url" alt="alternative text" title="advisory information" />
</a>

用法归纳

以上4种方法都正确,但是我认为图片属性究竟怎么用,不仅要看有无图片链接,还要注意图片周围是否有文字说明。综合考虑的话,如果针对<img>的属性使用,我的倾向如下:

  1. 图片无链接,只用alt,图片周围选择<figcaption>标签增加文字说明。
  2. 图片有链接,既用alt,也用title(最好是alt<img>里,title<a>里),图片周围不必再增加文字说明。但是!此时alt的作用是规避XHTML Strict错误,其内容并不显示;而title的值将代替alt的值出现。

参考文章

  1. 吴隽辰(JunChen Wu), alt属性和title属性

评论