www.webdeveloper.com
Results 1 to 7 of 7

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

  1. #1
    Join Date
    Mar 2010
    Posts
    281

    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

  2. #2
    Join Date
    Mar 2010
    Posts
    281
    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 */

  3. #3
    Join Date
    Mar 2011
    Posts
    1,141
    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.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    You can use :hover on anything. It doesn't have to be an <a>.

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,214
    Try:
    Code:
    <li><a href="#" id="home"></a></li>
    Could add a non-breaking space character "&nbsp;" (no quotes) between the tags.

  6. #6
    Join Date
    Jul 2006
    Location
    Wyoming, USA
    Posts
    87
    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.
    "If a picture is worth a thousand words, how come we need to limit our alt tag to 50 characters?"

  7. #7
    Join Date
    Mar 2010
    Posts
    281
    ok thanks for the input everyone

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles