使用 alt 标记作为锚链接是否正确？

使用 alt 标记作为锚链接是否正确，比如

<a href="#" class="test" alt="Something" src="sfasfs" ></a>
201891 次浏览
小开

对于锚点，应该使用 title 代替.alt 作为.a. 的有效属性参见 http://w3schools.com/tags/tag_a.asp

小开

要回答这些问题，最好看看官方的说明:

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

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

  3. 检查“ Content properties”，它列出了 a元素的所有允许的属性:

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

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

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

通过 验证你的 HTML，这样的错误会报告给您。

请注意，上面是针对 < em > HTML5 的，即 从2014年起 W3C 的 HTML 标准。2016年，< em > HTML 5.1 变成了 下一个 HTML 标准。查找允许的属性的工作方式是相同的。您将看到，在 HTML 5.1中，a元素可以有另一个属性: rev。

您可以在 W3C 的 < em > HTML 当前状态 上找到所有的 HTML 规范(包括最新的标准)。

小开

不，在任何 HTML 规范或草案中，a元素都不允许有 alt属性(它将是一个属性，而不是标记)。而且似乎没有任何浏览器认为它有任何意义。

那么，人们为什么尝试使用它就有点神秘了，但可能的解释是，他们是在模拟 img元素的 alt属性中这样做的，期望看到鼠标悬停的“工具提示”。这有两个问题。首先，每个元素都有自己的属性，这些属性在每个元素的规范中定义。其次，在一些古老的浏览器中，alt属性的“工具提示”呈现是一个怪异的或者甚至是一个 bug，而不是我们所期望的; alt属性应该在图像本身没有呈现的情况下呈现给用户，而且只有在图像本身没有呈现的情况下呈现给用户，不管是出于什么原因。

要创建一个“工具提示”，使用 title属性代替，或者，更好的方法是，用谷歌搜索“ CSS 工具提示”，并使用你喜欢的基于 CSS 的工具提示(它们可以被描述为隐藏的“层”，在鼠标悬停时可见)。

小开

如果希望像应用 alt 属性一样应用描述性信息，那么应该对锚标记使用 title 属性。Title 属性对于锚标记是有效的，除了提供关于链接页面的信息之外没有其他用途。

W3C 建议 title 属性的值应该与链接文档的 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

小开

“ title”在浏览器中得到了广泛的应用:

<a href="#" title="hello">asf</a>
小开

我用了头衔，而且成功了！

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

<a class="navbar-brand" href="http://www.alberghierocastelnuovocilento.gov.it/sito/index.php" title="sito dell'Istituto Ancel Keys">A.K.</a>
小开

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

HTML 不会使用任何属性阻止您:

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

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

用于设置图像描述 <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年提出的。


提交答案