Where does a href="#" pointing (at|to)? ?

Question

Hello!

Can someone tell me, what the href with the "#" means?

<a id="logoutLink" href="#">Logout</a>

Answer 1

It is the shortest way to say "go nowhere" :)

Often something else is bound to that link, a javascript event handler in most cases. But if an <a> doesn't have a href, most browsers don't render it with the same styling...so you need a short something to put there.

If it had something following the hash, like <a href="#topics">Go to Topics</a> it is a scroll to link, it goes to where the element with id="topics" is at the top of the page. A common example is <a href="#top">Go to Top</a>, and you stick a <div id="top"></div> at the very top of the page.

Answer 2

It means nothing... ;) Normally we use #something to create anchor to some element. If your URL ends with ...#comments then your browser will automatiacly jump (scroll the page) to element with id="comments".

href="#" is often used to create a link that leads to nowhere.

Answer 3

If points to an anchor on the page. In this case the anchor is just default. You could have multiple anchors on the page

<a name="anchor1"></a> <a name="anchor2"></a> <a name="anchor3"></a>

and link to them as

<a href="#anchor1">link 1</a> <a href="#anchor2">link 2</a> <a href="#anchor3">link 3</a>

Answer 4

It means make this page an anchor and navigate to it - which is why you see '#' after your URL in the address line (which can have nasty side-effects). Its also why your page will scroll back up to the top if you click on the link (sidenote: you can avoid this by adding "return false;" at the end of your onclick handler)

Answer 5

As others have pointed out, hash anchors (those beginning with the # sign) typically lead to a named anchor on the page. A table of contents on a page might be a good example of where you'd see this:

<ul>
  <li><a href="#history">Company History</a></li>
  <li><a href="#goals">Our Goals</a></li>
  <li><a href="#products">Products We Offer</a></li>
  <li><a href="#services">Services We Offer</a></li>
</ul>

<h2><a name="history">History</a></h2>
<p>The #history anchor tag will lead to the named anchor above.</p>

<h2><a name="goals">Our Goals</a></h2>
<p>The #goals anchor tag will lead to the named anchor above.</p>

<h2><a name="products">Products We Offer</a></h2>
<p>The #products anchor tag will lead to the named anchor above.</p>

<h2><a name="services">Services We Offer</a></h2>
<p>The #services anchor tag will lead to the named anchor above.</p>

One thing to note is that when you have a blank hash as the anchor href (i.e.: <a href="#">Blah</a>), some browsers make that jump to the top of the page, which is not the desired effect. To work around this and prevent the page from scrolling all the way to the top, a JavaScript implementation is often included to prevent the anchor tag from acting as it normally would by returning false.

<a href="#" onclick="return false;">Blah</a>

Answer 6

The hash symbol (i.e., <a id="logoutLink" href="#">Logout</a>) is a placeholder, so that you can preview the "Logout" link in a browser as you develop your page. Eventually, the hash symbol will be replaced with a real URL.