1. Technology

href="#"

By

This particular code in an <a> tag is commonly seen in sample code that involves JavaScript. Most commonly you will see it looking something like <a href="#" onclick="doSomething(); return false"> where the primary purpose of the tag is to provide a link for people to click on to run some JavaScript.

When used in sample code like that the # is a place holder representing where ever you want the link to actually go if the person visiting your page does not have JavaScript enabled.

When you see href="#" in live code on a web page it means that the person who wrote the page has made a mistake. You should never see href="#" in the actual source code of a web page because the # by itself is actually invalid and meaningless.

Whenever you attach JavaScript to a link whether like that or using an unobtrusive equivalent, you always need to also consider those who for whatever reason do not have JavaScript enabled. The return false on the end of my above example prevents the href actually being used if the JavaScript runs but the href is still what will be used if for any reason the JavaScript doesn't run. The href therefore needs to contain an actual valid value based on where you want the link to take people who do not have JavaScript available. Since the person who wrote the JavaScript for you doesn't know where you want those people to be taken they have just inserted a # in their code where you need to substitute the real address.

A # is valid in an href attribute provided that it isn't the only character in the value. Where the # is followed by additional characters those additional characters are the value of an id attribute elsewhere in the current web page and the page will jump to display the tag containing that id as close as possible to the top of the browser viewport. For example <a href="#here"> will jump to <div id="here"> in the same web page. If you also have a filename preceding the # then the id it will jump to will be within that web page so <href="next.htm#here"> will jump to that id on the next.htm page.

A # character is not valid as the last character of the href since it implies that you want to jump to an id within the page but the value of the id to jump to hasn't been specified. The action the browser should take in that instance is undefined however most will simply jump back to the top of the current page.

So what do you do if the JavaScript you want to attach is such that there is no alternative for those without JavaScript? Well in that case you don't want those without JavaScript to see the link at all since if it is visible to them then some of them will click on it and you don't have anything that you want it to do for them and that will just be confusing. The solution therefore is to ensure that the link is only visible for those with JavaScript enabled and the way to do that is to add the link into the web page using JavaScript.

Only where the <a href="#" onclick="doSomething(); return false"> is added into the web page using JavaScript can you be sure that everyone clicking on the link will have JavaScript enabled and tat therefore the doSomething() code will run and the href="#" will be ignored. Then and only then does it make any sense whatever to leave the # in that spot in the code since the href attribute is required in order for some browsers to accept the code as a valid link and where you know that the only people to see the link will have JavaScript enabled you also know that no one will therefore ever end up actually being taken to the place the href points to and so it can contain anything at all without it mattering and so # is as good a value as any and is certainly better than href="javascript:" (which is a construct that should never be used regardless of whether anything follows the colon or not).

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Improving Your JavaScript
  6. href="#" Learn the Purpose of This Invalid Code

©2014 About.com. All rights reserved.