关于Title / Alt属性;

Question

我希望我能发布这个。

我理解标题和alt属性的目的，但我只是不明白它们的最佳用途，或者我可以多次使用相同的标题/ 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>

我的理解是，标题标记在新浏览器中充当信息类型的工具提示/悬停，而alt标记用于在旧版浏览器中执行相同操作。它们还可以作为搜索引擎识别您网站的方法。

我希望我的问题能够理解。

Answer 1

  

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

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

---

标题

title attribute是global attribute，这意味着您可以在所有元素上使用它。一般来说（注意一些元素（例如abbr元素）它具有特殊含义）它被定义为：

  

title属性表示元素[...]

的建议信息

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

ALT

alt属性只能在area，input（用于图片按钮）和img element上使用。对于img，它有meaning：

  

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

有many rules你应该（不）使用这个属性。

---

因此，alt属性是图片的替代： EITHER 您看到图像 OR 您阅读了替代品文本。 <{1}}值不应作为图像的附加信息给出/显示。

alt属性提供其他信息，这些信息将提供给两者（查看图像的用户和读取备用文本的用户） 。但是，您不应该使用title属性作为重要信息的唯一方法，因为......

• ......典型的演示文稿经常被隐藏＆＃34;工具提示背后（用户不必知道工具提示完全存在，因为他们不会将鼠标悬停在所有元素上）
• ...键盘或触摸屏用户通常根本无法看到工具提示，因为他们无法悬停
• ...屏幕阅读器通常无法读取/宣布title值（在默认设置中）

Answer 2

<强> 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/