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

https://news.ycombinator.com/item?id=2374135

by keyle • 15 years ago

10 14 15 years ago

news.ycombinator.com

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.

chime2• 15 years ago

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• 15 years ago

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.)

keyle2• 15 years ago

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

chime2• 15 years ago

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• 15 years ago

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• 15 years ago

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.

keyle2• 15 years ago

All good points. Thanks.

onassar• 15 years ago

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 #)

doctororange• 15 years ago

http://api.jquery.com/event.preventDefault/

d_r• 15 years ago

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• 15 years ago

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• 15 years ago

Here's a shorter version:

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

myearwood• 15 years ago

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• 15 years ago

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):

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).

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

Related Stories