Is it OK to have an empty anchor tag?

Question

I know that I can do the following if I want to turn an image into a click-able link: ```

``` But I would prefer to use a CSS background image so that I can have a hover state: ``` # css .twitter{display:block; width:16px; height:16px; background:url("twitter.png")} ``` This works fine except I'm not sure it's entirely valid to have an anchor link that contains nothing. Chrome renders it fine, as does FF, but I'm not sure if others are the same. I realise I could just put some text inside the link, and hide it with `text-indent: -9999px`, but I've never liked that approach, for various reasons. Is my code above cross-browser compatible?

Accepted Answer

It's valid, but it's best if you did put something in there and used something like

```
font-size: 0;
```

to hide it away. This way, if someone does not have CSS (screen readers for example), he would still be able to tell approximately what the link is about.

Here's a great article on the subject

Is it OK to have an empty anchor tag?

Solution

Problem