146

使用 alt 标签作为锚链接是否正确，例如

<a href="#" class="test" alt="Something" src="sfasfs" ></a>
4

7 回答 7

147

最好通过查看官方规范来回答此类问题：

  1. 转到规范：https ://www.w3.org/TR/html5/

  2. 搜索“a元素”：https ://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

  3. a检查“内容属性”，其中列出了元素的所有允许属性：

    • 全局属性
    • href
    • target
    • download
    • rel
    • hreflang
    • type

  4. 检查链接的“全局属性”：https ://www.w3.org/TR/html5/dom.html#global-attributes

如您所见，元素alt上不允许使用该属性。 您还会注意到该属性也是不允许的。a
src

通过验证您的 HTML，会向您报告此类错误。

请注意，以上内容适用于HTML5，这是W3C 从 2014 年开始制定的 HTML 标准。2016 年，HTML 5.1成为下一个 HTML 标准。以相同的方式查找允许的属性。您将看到该a元素在 HTML 5.1 中可以具有另一个属性：rev。

您可以在W3C 的HTML Current Status上找到所有 HTML 规范（包括最新标准）。

于 2013-02-13T10:14:43.383 回答
64

对于锚点，您应该改用标题。alt 不是 a 的有效属性。请参阅http://w3schools.com/tags/tag_a.asp

于 2013-02-13T09:27:41.123 回答
38

“title”在浏览器中被广泛实现。尝试：

<a href="#" title="hello">asf</a>
于 2015-11-10T01:30:11.593 回答
9

如果您希望像应用 alt 属性一样应用描述性信息，则应该将 title 属性用于锚标记。title 属性在锚标记上有效，除了提供有关链接页面的信息外，没有其他用途。

W3C 建议 title 属性的值应与链接文档的标题值匹配，但这不是强制性的。

http://www.w3.org/MarkUp/1995-archive/Elements/A.html

或者，可能更有益的是，您可以使用 ARIA 可访问性属性aria-label（不要与 混淆aria-labeledby）。 aria-label与 alt 属性对图像的作用相同，但用于非图像元素，并且包括一些优化措施，因为您针对屏幕阅读器进行了优化。

http://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_labels_for_objects

如果你想描述一个锚标签，通常使用 rel 或 rev 标签是合适的，但你仅限于特定的值，它们不应该用于人类可读的描述。

Rel 用于描述链接页面与当前页面的关系。（例如，如果链接页面是逻辑系列中的下一个，则为 rel=next）

rev 属性本质上是 rel 属性的反向关系。Rev 描述了当前页面与链接页面的关系。

您可以在此处找到有效值列表：http: //microformats.org/wiki/existing-rel-values

于 2014-09-27T06:30:10.597 回答
6

不，任何 HTML 规范或草案中alt的元素都不允许使用属性（它将是属性，而不是标签） 。a而且它似乎也不被任何浏览器认为具有任何意义。

那么，为什么人们尝试使用它有点神秘，但可能的解释是他们这样做与元素的alt属性类似img，期望在鼠标悬停时看到“工具提示”。这有两个问题。首先，每个元素都有自己的属性，在每个元素的规范中定义。其次，一些古代浏览器中属性的“工具提示”渲染alt是/曾经是一个怪癖甚至是一个错误，而不是可以预料的事情；当且仅当无论出于何种原因没有呈现图像本身时，该alt属性才应该呈现给用户。

要创建“工具提示”，请改用title属性，或者更好的是，使用 Google 搜索“CSS 工具提示”并使用您喜欢的基于 CSS 的工具提示（它们可以被描述为隐藏的“层”，在鼠标悬停时变得可见）。

于 2013-02-13T12:01:03.987 回答
6

我用了标题，它起作用了！

title 属性给出了链接的标题。除了一个例外，它纯粹是建议性的。值为文本。样式表链接例外，其中 title 属性定义了替代样式表集。

<a class="navbar-brand" href="http://www.alberghierocastelnuovocilento.gov.it/sito/index.php" title="sito dell'Istituto Ancel Keys">A.K.</a>
于 2017-02-05T08:37:05.143 回答
3

我很惊讶地看到所有答案都说明在标签中使用alt属性是无效的。这是绝对错误的。a

Html 不会阻止您使用任何属性：

<a your-custom-attribute="value">Any attribute can be used</a>

如果你问在语义上使用alt属性是否正确，a那么我会说：

不。它用于设置图像描述<img alt="image description" />。

这是您如何处理属性的问题。这是一个例子：

a::after {
  content: attr(color); /* attr can be used as content */
  display: block;
  color: white;
  background-color: blue;
  background-color: attr(color); /* This won't work */
  display: none;
}
a:hover::after {
  display: block;
}
[hidden] {
  display: none;
}
<a href="#" color="red">Hover me!</a>
<a href="#" color="red" hidden>In some cases, it can be used to hide it!</a>

同样，如果您问使用自定义属性在语义上是否正确，那么我会说：

不，使用data-*属性来进行语义用途。

糟糕，问题是在 2013 年提出的。

于 2020-04-17T18:09:44.043 回答