SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru bronze trophy TomB's Avatar
    Join Date
    Oct 2005
    Location
    Milton Keynes, UK
    Posts
    989
    Mentioned
    9 Post(s)
    Tagged
    2 Thread(s)

    href="javascript:void(0);" or omit href attribute all together?

    I typed in <a href="javascript:void(0);"> when I realised... why? It's going to be a clickable link that triggers a javascript event.

    Wouldn't it be better to simply omit the href attribute, it's not required after all. It seems the only reason to include the href is to force the hand cursor. Since this is possible with CSS is there any semantic or compatibility reason to include the href attribute at all?

    Further to that: Should it even be an <a> tag or should I just use a clickable div/li/whatever the parent element is?

    I'm interested in the best practice pros/cons of it.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TomB View Post
    I typed in <a href="javascript:void(0);"> when I realised... why? It's going to be a clickable link that triggers a javascript event.

    Wouldn't it be better to simply omit the href attribute, it's not required after all. It seems the only reason to include the href is to force the hand cursor. Since this is possible with CSS is there any semantic or compatibility reason to include the href attribute at all?

    Further to that: Should it even be an <a> tag or should I just use a clickable div/li/whatever the parent element is?
    The main reason for keeping the script activation in an <a> tag is to ensure that it is accessible for keyboard navigation and other assistive technology (including some mobile devices), which usually won't allow anything other than a link or input to receive focus, meaning that if you have the script activation on a <div> or other element, it will be impossible for people without a mouse or certain touch-screen devices to activate it.

    I'm not aware of any advantage of including href="javascript:void(0);" or even just href="#", although it may be that some devices won't allow keyboard-users to tab to an <a> that doesn't have an href.

    Of course, what you should try to ensure in most cases is that you have a non-scripted fallback for people not running Javascript, which would of course use the href.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    What Stevie said ^

    I'd only add that having a proper URL in the href to that content also helps people like me who like to right click > open in new tab. It does depend on what you are showing on click though.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Anyone with JavaScript disabled who clicks on the link will need a proper URL in the link as their destination.

    If you don't want people with JavaScript disabled to click on the link thyen you should be adding the link itself using JavaScript. Then you can use href="" since you know that it will never be used.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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