将alt标签用于锚链接是否正确?


124

将alt标签用于锚链接是否正确,例如

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

Answers:


130

通过查看官方规范可以最好地解决这些问题:

  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

如您所见,alta元素上不允许使用该属性。
另外,您还会注意到该src属性也不被允许。

通过验证HTML,将向您报告此类错误。


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

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


2
我看不到“ 全局” title属性中的a属性,是否可以在中使用这样的title属性a
Yousef Altaf

1
@YousefAltaf:您在哪一页上看?链接的一个,全局属性,列表title
UNOR

我知道了它是否列在Global属性下,但是如果我不使用它,是否会影响页面质量?
Yousef Altaf

@YousefAltaf:这是一个不同的问题,最好不要在这里讨论。参考其定义。如果您仍然对此有疑问,请随时创建一个单独的问题(但如果尚未提出要求,则可以更好地进行搜索)。
UNOR

4
答案标记为“如何查找HTML属性”。谢谢。
编码

59

对于锚点,应改为使用标题。alt不是a的有效属性。参见http://w3schools.com/tags/tag_a.asp


@FabioPoloni谢谢,我希望每个人都可以在该页面上找到链接波纹管:-)
tomis

我以为如果某个人对这个话题不太了解,他就不会找到;-)
Fabio Poloni

8
这条信息恰好在w3schools上是正确的,但是w3schools不是官方的,也不可靠,请参阅w3fools.com
Jukka K.

thx伙计们...除此之外,我的需求完全基于可访问性标准,并且没有性能开销。我使用了一个spirte图像,同时希望提供alt属性,而使用背景图像则不能。相反,我有一个解决方法可以帮助..
2013年

1
顺便说一句,标题不再在w3schools上出现。但是您可以使用title,因为它是全局属性:w3.org/TR/html5/dom.html#global-attributes
rosell.dk


6

不可以,任何HTML规范或草稿中alta元素都不允许使用属性(应为属性,而不是标签)。而且似乎没有任何浏览器认为它具有任何意义。

那么,为什么人们尝试使用它有点神秘,但是可能的解释是,他们正在模拟使用元素alt属性img,并希望在鼠标悬停时看到“工具提示”。这有两点错误。首先,每个元素都有自己的属性,这些属性在每个元素的规范中定义。其次,alt在某些古老的浏览器中,属性的“工具提示”呈现是/是古怪的,甚至是错误,而不是期望的。该alt属性是应该呈现给用户,当且仅当图像本身不提出,无论出于何种原因。

要创建“工具提示”,请改用title属性,或者最好使用Google的“ CSS工具提示”,并使用您偏爱的基于CSS的工具提示(它们的特征是隐藏的“层”,在鼠标悬停时可以看到)。


如何使用通过基于CSS的工具提示以编程方式创建的链接?
萨尔瓦多·瓦伦西亚

6

如果您希望像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属性的反向关系。修订版描述了当前页面与链接页面的关系。

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


5

我使用标题,并且有效!

title属性提供链接的标题。除了一个例外,它纯粹是建议性的。该值为文本。样式表链接例外,其中title属性定义了备用样式表集。

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

1

我很惊讶地看到所有答案都说明altatag中使用attribute 无效。这是绝对错误的。

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年有人问了这个问题。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.