2

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

<a id="logoutLink" href="#">Logout</a>
sid_com
  • 24,137
  • 26
  • 96
  • 187
  • 2
    Usually means it's attached to some javascript. – Ben Shelock Mar 27 '10 at 17:53
  • +1 for nerd-ish use of regexes in regular language (Ha! The pun! the pun!) – Leo Mar 28 '10 at 00:28
  • The "?" should not be part of the "regex". It should be a question; what is right: "pointing at" or "pointing to"? I hoped some editor would edit it. – sid_com Mar 28 '10 at 08:05
  • possible duplicate of [What is href=# and why is it used?](http://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used) –  Apr 18 '15 at 16:41

6 Answers6

5

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
4

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>
Matt Huggins
  • 81,398
  • 36
  • 149
  • 218
  • 1
    You should just be able to do

    History

    these days.
    – robertc Mar 27 '10 at 18:04
  • @robertc - Do you have a link that demonstrates that's the expected implementation from the W3C or anything like that? I'm not discounting your statement, I just like to keep up to date about this kind of stuff and can't find anything official that states the same. – Matt Huggins Mar 28 '10 at 20:28
  • @robertc - Nevermind, I found a statement from here: http://www.w3.org/TR/REC-html40/struct/links.html It states: "Destination anchors in HTML documents may be specified either by the `A` element (naming it with the `name` attribute), or by any other element (naming with the `id` attribute)." Thanks for pointing that out! – Matt Huggins Mar 28 '10 at 20:30
  • I think the main reason why it's not more well known is that a lot of browsers didn't support it at the time when the standard came out. – robertc Mar 29 '10 at 00:17
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.

Crozin
  • 43,890
  • 13
  • 88
  • 135
  • Actually the link doesn't create the anchor, it just tells the browser to jump to that anchor when the link is processed. – poke Mar 27 '10 at 17:04
1

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>

William
  • 8,007
  • 5
  • 39
  • 43
1

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)

plodder
  • 2,304
  • 18
  • 19
0

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.

seasonedgeek
  • 160
  • 6