

Ask HN: the current state of the empty # in 'a href' - keyle

What is your take on the a href='#' in web applications?<p>It used to be and may still be very well be today the 'good practice' to always have a # at least in the HREF. Empty or no HREF could cause issues with some browsers I was told.<p>Today it raises other problems. Those # litter web applications making link sharing duplicates in news site (ie. .com/# is different than .com/ but shouldn't), it also makes statistics skewed in some stats services.<p>I personally hate to see those empty domain.com/#<p>Note I have nothing against anchors actually being used as anchors, ie domain.com/#somesection.  That's not what I'm referring to.<p>It also annoys me off to have those littering # in my browser history (ie. when you type in the url bar).<p>Is there an alternative? Using &#60;button&#62; everywhere can also cause issues in some browsers I read, with some browser using the content of the button tag as labels while some others use the value attribute.<p>Is using A with no href still SIN today?<p>And don't tell me about HTML5. If it's not everywhere it's not on my cards.<p>Thanks.
======
parrispreston
The standard is to use # in anchor tags that don't link anywhere that get
hijacked with javascript and typically using jquery use e.preventDefault()
which will stop the # from going into the address bar. You can also use return
false. But e.preventDefault() is best practice. You need the # in the href
because without it older browsers will not act like its a link which will
prevent :hover from working. The # signs you are seeing all over the web are
probably people who are not implementing preventDefault or return false. You
could also be seeing them for sites that attempt to use something like jquery
address for ajax navigation. If you are attempting to copy and share one of
these links and it is not working then the developer didn't set up the ajax
state management correctly for the particular app you are using. On a side
note, you should probably leave these types of programming specific questions
for stack overflow. I wouldn't consider this appropriate for hacker news in my
opinion. Also you will probably get a larger response for this type of
question on stack overflow. Heck, it has probably already been asked and
answered multiple times on there.

~~~
keyle
All good points. Thanks.

------
jasonkester
I've always been a fan of

    
    
      <a href="javascript:void(null);">oi!</a>
    

It'll look like a link (unlike leaving the href empty), and wont ever perform
wacky page scrolling tricks or mess up your URL bar.

That's been my signature since 1997. Don't see any reason to change it...

~~~
pygorex1
Here's a shorter version:

    
    
        <a href="javascript:;"></a>

------
chime
I use A without href only when I'm making an actual anchor A name. When I use
href=#, I always have javascript onclick return false. This won't stop
crawlers but it keeps the user's history and address bar clean.

~~~
keyle
what about href='' and in the jquery onclick function, return false at the
end?

~~~
chime
href='' will reload the current page in most browsers if the JS code hasn't
loaded yet (waiting for $(function(){}) to fire) or has an error for some
reason. href='#' will at least prevent that. Returning false form jQuery
works.

------
doctororange
<http://api.jquery.com/event.preventDefault/>

------
plasma
If you want to retain IE6 compatibility (usually a must for government related
sites!), I've found this technique is pretty solid for cross browser platform
compatibility (IE6-9, FF, Chrome, Safari):

<a href="#" onclick="DoSomething(); return false;">My link</a>

1) When you hover over the link, a 'hand' cursor appears for every browser
(due to the #)

2) IE6 (in particular) won't barf at running your javascript code found in the
onclick handler.

If your href tag contained "javascript:void(0)" instead of "#"; your code may
not be run under IE6.

3) Because you 'return false' on the onclick, all browsers still avoid leaving
the customers web browser with an unnecessary # in the top of the Url bar (as
the click is effectively cancelled).

------
d_r
I usually tack on "return false;" to the onclick action to prevent the browser
from actually navigating to '#'. Not sure if this is the recommended/best way,
but it works.

E.g.

    
    
       <a href="#" onclick="doSomething(); return false;">test</a>

------
onassar
I've always liked the standard of having a # value, and then using JS to
prevent the default link behaviour (prevents address bar from changing to #)

------
myearwood
This is a valid question and you raise an intresting point, but I really think
that is is more suited to a differant website, like Stack Overflow.

