Best practice question, an empty <a>..?

What's considered a best practice in the following situation?

i have menu via a UL, but for one item there is currently there is no text or image inside the anchor tag. so it looks like this:
<li><a id="home"></a></li>

instead the anchor tag is styled and uses a background image. i did this because i wanted to use a:hover to change the background image (instead of javascript) and also wanted use css transistion.

but is that a bad practice, having an empty <a> tag???,

thanks

in the past i'd put a transparent gif in there or something but that seems kind of lame

well it just occurred to me, maybe i should do it like thiss..

<a href='home.html" id="home"><img src..... etc>

and then style like this.

#home:hover img {position:relative;top:-50px;} /*change positioning via hover */

Naturally, it's best practice not to have an empty <a>nchor tag in your code - if only because the search engines might see it as a hidden link. If you must include the tag in your code for some reason, it's best to omit the 'href' attribute for that reason. Overall, I'd suggest looking for ways to omit the tag entirely until it's appropriate to include it for users.

You can use :hover on anything. It doesn't have to be an <a>.

Try:

Code:

---

<li><a href="#" id="home"></a></li>

---

Could add a non-breaking space character "&nbsp;" (no quotes) between the tags.

For accessibility reasons, I say it is very bad to have an empty anchor tag in your code. People using a screen reader etc would not be able to read the link. The simplest solution would probably by to wrap the anchor around an image tag instead, but be sure to include an alt attribute in the image tag.

ok thanks for the input everyone