HN Explorer

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

10 points by keyle ↗ HN
What is your take on the a href='#' in web applications?

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.

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.

I personally hate to see those empty domain.com/#

Note I have nothing against anchors actually being used as anchors, ie domain.com/#somesection. That's not what I'm referring to.

It also annoys me off to have those littering # in my browser history (ie. when you type in the url bar).

Is there an alternative? Using <button> 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.

Is using A with no href still SIN today?

And don't tell me about HTML5. If it's not everywhere it's not on my cards.

Thanks.

14 comments

[ 2.6 ms ] story [ 36.3 ms ] thread
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.
jonah
Another approach is href="javascript:;". Not as nice in your status bar but slightly less code and you don't need a big JS lib to implement it.

(preventDefault is preferable though.)

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.
craigkerstiens
Adding a no follow on the link would stop the crawlers actually. Your current approach with return false and a no follow is the approach I most commonly use. The full result looking like:

    <a href="#" onclick="DoSomeStuff();return false;" rel="nofollow">
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.
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 #)
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>
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>
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.
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).