img标签的alt与title属性

301 阅读2分钟

alt属性

image.png

  • 定义了图像的备用文本描述,当图像无法加载或屏幕阅读器用户使用键盘导航时,会显示这个替代文本。
  • 它还有助于搜索引擎理解图像的内容,从而提高网页在搜索结果中的排名。

title属性

image.png

  • 提供了一个简短的提示或描述,当用户将鼠标悬停在图像上时,这个提示会显示为一个工具提示。
  • 它也可以包含额外的信息或扩展的描述,但通常比 alt 属性更简短。

alt与title的区别

  • 含义不同:img标签的alt属性主要是当图片无法加载或屏幕阅读器用户使用键盘导航时,提供替代文本。而title属性主要是给用户提供关于元素的额外信息或描述,当用户将鼠标悬停在图像上时,会显示为工具提示。
  • 在浏览器中的表现不同:在大部分现代浏览器中,当鼠标移动到图像上时,title属性的值会显示为工具提示,而alt属性的值不会显示。不过,在一些老旧的IE浏览器中,如果没有为img标签设置title属性,而写了alt属性,那么alt属性的值会进行显示。
  • 对于SEO的影响:搜索引擎对图片意思的判断主要靠alt属性,因此在图片alt属性中加入简要文字说明,同时包含关键词,也是页面优化的一部分。条件允许的话,可以在title属性里进一步对图片进行说明。

img标签的alttitle属性虽然都可以提供关于图像的额外信息,但它们的用途和目标有所不同。