How to write the A tag correctly?

Question

css

There is a link that should be an icon. There are several options for writing:
1. In the first case, a picture is generated that does not carry a semantic load. If someone prints the page, or no CSS is available, the picture is not the best. And, if the user has images disabled, he will not see anything (even if alt is written, he will not understand anything from a 16x16 image).

<a href="URL"><img src="/path/to/icon.png"></a>

2. Second option: empty tag. The size of the image is set through CSS, and the image itself is set through the background. In terms of semantics, IMHO, even worse than the previous version. If images are disabled, it will not see anything; if CSS is disabled, it will not see anything.
<a href="URL"></a>
3. Similar to the second, but using fallback: text that is hidden by CSS. Solves the problem of unavailable CSS, but if the user does not display images, they will also not see anything.
<a href="URL">Icon text</a>
What's the best way to do it?

Answer 1

<a href="#"><img alt="[img]" title="текстовое описание на случай откл.изобр."
  style="width: 16px; height:16px; background-color: по_вкусу"/></a>

If you write in the background, it is not printed from the browser by default. (Disabling CSS - are there really such readers (not robots)?)

Answer 2

This is ambiguous, I will explain in more detail:
Once, for the sake of order, I made it a rule for myself: all images are divided into design images and content images. The first category includes all kinds of corners, frames, backgrounds for links and buttons, etc. The second category includes avatars, screenshots, photos and other uploaded and/or modified content. So, the former must be set via CSS, and the latter via IMG (as a result, they can be saved with a click, set alt to them, etc.). A link can be in both categories. If it's just a link (for example, share on twitter with a bird), then option #2. If this is a link (for example) to view the full size of the photo, or to the user's profile, then only option number 1. Option #3 is completely out of the question because hacks and magic are evil.

Answer 3

See how on habrahabr:

The second option IMHO is the most normal, have you seen at least one person with disabled CSS? Okay, Javascript, but without CSS, it’s no layout at all, it doesn’t need your icon.

Answer 4

2nd option, because the icon will not be loaded if it is not visible.

Answer 5

<a href="#" title="Текст ссылки">Текст ссылки</a>