10

我了解title和alt属性的用途，但我只是不了解它们的最佳用途，或者我是否可以多次使用相同title/alt多次。

例如，拿一个关于狗的网站：

据我了解，所有img标签都需要一个alt属性：

<img src="Husky.png" alt="Husky" />
<img src="Rottweiler.png" alt="Rottweiler" />

alt对同一主题的多张图片使用相同的属性是一种好习惯吗？

<img src="Husky2.png" alt="Husky" />
<img src="Husky3.png" alt="Husky" />
<img src="Husky4.png" alt="Husky" />

在每个标签中使用title/属性是一种好习惯吗？alt如果多次使用相同的属性呢？

例子：

<ol title="This Dog">
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
</ol>

<div id="body">
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
</div>

我的理解是，该title属性充当将鼠标悬停在文本上时出现的工具提示。这种事情必须在较新的浏览器中完成，但在旧的浏览器中alt也title曾经做过同样的事情。这些属性还可以作为搜索引擎识别您网站的一种方法。

4

2 回答 2

20

我的理解是，标题标签在较新的浏览器中充当工具提示/悬停在事物的信息类型上，而 alt 标签用于在旧浏览器中执行相同的操作。

不，titleandalt属性具有不同的含义/目的（不是旧方法与新方法）。

标题

该title属性是一个全局属性，这意味着您可以在所有元素上使用它。通常（请注意，某些元素（例如abbr元素）具有特殊含义）它被定义为：

该title属性表示元素的咨询信息 […]

您应该阅读属性的定义，它解释了应该（不）如何使用它。

alt

该alt属性只能用于area, input（用于图像按钮）和imgelement。对于img，它具有以下含义：

该alt属性的值是img元素的后备内容，并为无法处理图像或禁用图像加载的用户和用户代理提供等效内容。

您应该（不）如何使用此属性有很多规则。

因此，该alt属性是图像的替代品：您看到图像或阅读替代文本。该alt值不应作为图像的附加值给出/呈现。

该title属性提供了附加信息，这些信息将提供给两者（查看图像的用户和阅读替代文本的用户）。但是，您不应该将title属性用作获取重要信息的唯一手段，因为……</p>

  • ... 典型的演示通常“隐藏”在工具提示后面（用户不一定知道工具提示存在，因为他们不会将鼠标悬停在所有元素上）
  • …键盘或触摸屏用户通常根本看不到工具提示，因为他们无法悬停
  • …屏幕阅读器通常不读取/宣布title值（在默认设置中）
于 2012-10-31T21:47:40.010 回答
3

ALT： Alt 文本意味着那些选择在浏览器中禁用图像的人和那些根本无法“看到”图像的用户代理的替代信息源。它应该描述图像是关于什么的，并让那些有兴趣看到它的访问者。没有 alt 文本，图像将显示为空图标：没有 alt

在 Internet Explorer 中，当您将鼠标悬停在图像上时，Alt 文本也会弹出。另外，谷歌官方确认它在试图理解图像的含义时主要关注替代文本。

带有 alt 但图像未显示的图像。

<img src="a.png" alt="Ann Smarty">

在此处输入图像描述

另一个没有 alt 和图像的图像未显示。

<img src="a.png">

在此处输入图像描述

标题： 图片标题（元素名称不言自明）应该提供附加信息并遵循常规标题的规则：它应该是相关的、简短的、吸引人的和简洁的（标题“提供有关它所针对的元素的咨询信息已设置“）。在 FireFox 和 Opera 中，当您将鼠标悬停在图像上时它会弹出：带有标题和显示图像的图像。

<img src="a.png" title="Optimize Images For Search Engines, Social Media">

在此处输入图像描述

阅读更多：http ://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/

于 2015-07-06T07:45:07.983 回答