Is it correct to use alt tag for an anchor link?

Question

Is it correct to use alt tag for an anchor link, something like

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

Cupellation

Answer 1

Such things are best answered by looking at the official specification:

1. go to the specification: https://www.w3.org/TR/html5/

2. search for "a element": https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

3. check "Content attributes", which lists all allowed attributes for the a element:

   • Global attributes
   • href
   • target
   • download
   • rel
   • hreflang
   • type

4. check the linked "Global attributes": https://www.w3.org/TR/html5/dom.html#global-attributes

As you will see, the alt attribute is not allowed on the a element.
Also you’d notice that the src attribute isn’t allowed either.

By validating your HTML, errors like these are reported to you.

---

Note that the above is for HTML5, which is W3C’s HTML standard from 2014. In 2016, HTML 5.1 became the next HTML standard. Finding the allowed attributes works in the same way. You’ll see that the a element can have another attribute in HTML 5.1: rev.

You can find all HTML specifications (including the latest standard) on W3C’s HTML Current Status.

Suitable

I don't see the title attribute in the a Global attributes is it right to use such title attribute in the a or not? – Presley

@YousefAltaf: On which page do you look? The linked one, Global attributes, lists title . – Suitable

I got it so it's listed under the Global attributes, but does it effects the page quality if I use it or not? – Presley

@YousefAltaf: That’s a different question, which should better not be discussed here. Refer to its definition. If you still have questions about it, feel free to create a separate question (but better search before if it hasn’t been asked already). – Suitable

Answer bookmarked as "How to look up HTML attributes". Thanks. – Gordon

You did not answer the question. We want to conform to the standard for alternative text to pop over the highlighted link but the suggestion is that it is invalid or not supported. So the best way is to go back to using the 'alt' crutch? – Regen

@SalvadorValencia: I think I did. OP asks if it’s correct to use the alt attribute on an a element, and my question answers it (tl;dr: no, it’s not allowed). -- I don’t understand the reference to "text to pop over", as the OP doesn’t seem to mention anything like that. – Suitable

Now here's an answer that teaches a man to fish – Overstock

Answer 2

For anchors, you should use title instead. alt is not valid atribute of a. See http://w3schools.com/tags/tag_a.asp

Smithers

@FabioPoloni Thanks, I have expected that everyone can find link bellow on the page :-) – Smithers

I thought if someone doesn't know much about this topic, he wouldn't find it ;-) – Lion

This piece of info happens to be correct at w3schools, but w3schools is not official and it is not reliable, see w3fools.com – Canales

thx Guys... apart from that my need was purely based on accessibility standards as well as negating performance overhead. I have used a spirte image , at the same time wanted to give alt attribute, which could not do using background images. Instead i have a workaround which helped.. – Cupellation

"title" is btw not on w3schools anymore. But you can use title, as it is a global attribute: w3.org/TR/html5/dom.html#global-attributes – Rhatany

Answer 3

"title" is widely implemented in browsers. Try:

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

Sienkiewicz

This is how an answer should look like instead of the 10 minutes answer above. But this answer should also have the link: w3schools.com/tags/att_global_title.asp – Roxannaroxanne

I agree that the above doesn't answer the question, however according to it, title is incorrect according to the HTML5 specification (even though most browsers will implement it). – Drandell

@Drandell that might be because browsers not only implement HTML5, I think all previous HTML versions are implemented plus some less strict versions too. Then the question wasn't about HTML5 specifically. IMHO if something works in most browsers, that is the correct HTML. – Sienkiewicz

Answer 4

You should use the title attribute for anchor tags if you wish to apply descriptive information similarly as you would for an alt attribute. The title attribute is valid on anchor tags and is serves no other purpose than providing information about the linked page.

W3C recommends that the value of the title attribute should match the value of the title of the linked document but it's not mandatory.

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

---

Alternatively, and likely to be more beneficial, you can use the ARIA accessibility attribute aria-label (not to be confused with aria-labeledby). aria-label serves the same function as the alt attribute does for images but for non-image elements and includes some measure of optimization since your optimizing for screen readers.

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

---

If you want to describe an anchor tag though, it's usually appropriate to use the rel or rev tag but your limited to specific values, they should not be used for human readable descriptions.

Rel serves to describe the relationship of the linked page to the current page. (e.g. if the linked page is next in a logical series it would be rel=next)

The rev attribute is essentially the reverse relationship of the rel attribute. Rev describes the relationship of the current page to the linked page.

You can find a list of valid values here: http://microformats.org/wiki/existing-rel-values

Supranational

Answer 5

I used title and it worked!

The title attribute gives the title of the link. With one exception, it is purely advisory. The value is text. The exception is for style sheet links, where the title attribute defines alternative style sheet sets.

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

Concenter

Answer 6

No, an alt attribute (it would be an attribute, not a tag) is not allowed for an a element in any HTML specification or draft. And it does not seem to be recognized by any browser either as having any significance.

It’s a bit mystery why people try to use it, then, but the probable explanation is that they are doing so in analog with alt attribute for img elements, expecting to see a “tooltip” on mouseover. There are two things wrong with this. First, each element has attributes of its own, defined in the specs for each element. Second, the “tooltip” rendering of alt attributes in some ancient browsers is/was a quirk or even a bug, rather than something to be expected; the alt attribute is supposed to be presented to the user if and only if the image itself is not presented, for whatever reason.

To create a “tooltip”, use the title attribute instead or, much better, Google for "CSS tooltips" and use CSS-based tooltips of your preference (they can be characterized as hidden “layers” that become visible on mouseover).

Canales

How do I use links created programmatically by using CSS-based tooltips? – Regen

Answer 7

I'm surprised to see all answers stating the use of alt attribute in a tag is not valid. This is absolutely wrong.

Html does not block you using any attributes:

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

If you ask if it is semantically correct to use alt attribute in a then I will say:

NO. It is used to set image description <img alt="image description" />.

It is a matter of what you'd do with the attributes. Here's an example:

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>

Again, if you ask if it is semantically correct to use custom attribute then I will say:

No. Use data-* attributes for its semantic use.

---

Oops, question was asked in 2013.

Incursive