3

I found # in source code quite often.

<li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>

why not just 

<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>

EDIT Thank you guys for the answers. But yup, realised this is a duplicate question >.< sorry

Idris
  • 997
  • 2
  • 10
  • 27
noooooooob
  • 1,872
  • 3
  • 21
  • 27

4 Answers4

7

More than you ever wanted to know about anchors

An a element has two purposes in HTML:

  • It's an anchor, to which you can link;
  • It can be a hyperlink to an anchor, a document, or any other URL.

If you write:

  <a name="Chapter4">Chapter 4. The Counterpane</a>

... and post it on the web at a location like

   http://example.com/dedicated/hawthorne.html

... then anyone can link to that specific anchor with this URL:

   http://example.com/dedicated/hawthorne.html#Chapter4

The # sign is reserved in URL's for just this purpose: to separate the anchor's name from the URL of the document containing the anchor.

As you've probably seen, the structure of URL's goes something (simplified a little!) like this:

  (method) : // (host) / (path-to-document-on-host) # (anchor)

So, e.g.

  http   :// example.com / dedicated/hawthorne.html # Chapter4
  method     host          path-to-document           anchor

Fortunately, URL's are very lazy, and if you omit any part of them, they will default to taking that part from the current document. You can even omit parts of the path to the document, by creating relative URL's.

One type of relative URL is to leave off everything but the fragment. So, from within the same document, one might have a Table Of Contents with an entry like:

   <li> <a href="#Chapter4">Chapter 4. The Counterpane</a> </li>

This allows the document to "travel" anywhere, because its host and path will default to the location wherever it happens to be.

Even better, since it's clear that the target anchor must be in the same document, (almost) every web browser (except some very esoteric and crotchety ones) would simply scroll (with more or less finesse) to the target anchor, without (re-)loading the document.

Now, since an a might be an anchor, and might be a hyper-reference ("link"), you have to use one or the other attribute for the web browser to know which behaviour you intend.

Simply writing

    <a> Foo. </a>

... is ambiguous. Should it be an anchor? Probably not; there's no name! Should it be an hyper-reference? Clearly not; there's no reference!

Now, it had been (and, in some browsers, may still be) that certain attributes of JavaScript'y goodness like onClick were reserved for only very specific elements. So, in order to create a widget on the page upon which one might trap those events, one had to use an element that supported it.

It just so happens that hyper-reference (link) elements happen to support a lot of these events, even in very old and cranky web browsers like Netscape 4.0 who didn't like to talk about events on things like paragraphs and divisions.

So, it became rather common to create a link, and then hide the fact that it was a link, just in order to trap a JavaScript event like click on it.

As mentioned before, URL's are very forgiving about your omitting of various parts of them; and also, a fragment within the same document written like

 <a href="#some-anchor"> ... </a>

...also has the bonus property of not (re-)loading the document. So what happens if we strip it down to its barest form?

 href="#"

Well, there you have it. You have a reference to an anchor in the current document with no name. Since that anchor can't possibly exist, all that happens is ... nothing.

(Well, often nothing. The downside is, the browser is meant to scroll to the top of the document, but since you're trying to trap their click in JavaScript --- you are, aren't you? --- you'll presumably cancel the navigation event before that can happen.)

So, the reason for href="#" links is:

  • This very particular form of link will do nothing, and yet still qualify as a valid hyper-reference, so you can attach JavaScript event listeners to it, no matter how cantankerous of an ancient web browser your end-users manage to dig up

Another, similar gimmick is to use href="javascript:void(0);"

The main difference between href="#" and this, is that if your user doesn't have JavaScript enabled, they'll see different behaviour.

  • href="#" will do nothing; or, maybe scroll to the head of the document, which might leave them wondering what the link was supposed to do.
  • href="javascript:void(0);" will usually pop up some kind of dialog box mocking them for disabling their JavaScript, annoying them, but probably making them fully aware that they're missing out on "something" at that point.

Which one you prefer is a matter of taste, I suppose, although one of them is much easier to type.

PS: the other disadvantage of href="javascript:void(0);" (or similar) is that it can't be copied as a reference to the current document. If someone, for example, does a right-click → “copy link location,” “open in new tab,” or so forth (eg, middle-click to open in a new tab) on href="#", the browser will usually do a somewhat sane thing, and use the location of the current document. On the other hand, opening javascript:void(0) in a new tab will probably leave someone staring at a blank window, scratching their head.

BRPocock
  • 13,638
  • 3
  • 31
  • 50
  • This is a duplicate, so I posted my answer on the original. There's some information in your post that isn't quite accurate to the spec. Check my answer out: http://stackoverflow.com/a/21397285/1435655 Nonetheless, you put a lot of time into this answer and that's awesome! Keep it up! – m59 Jan 28 '14 at 05:22
  • Intentionally off-spec a bit; I mean, in real life, have you ever actually seen someone use `href=#` to navigate to the head of a document? :-) If we were all running on W3C spec, the whole thing would rarely/almost-never exist ... and admittedly incomplete (I dare not examine the horrors of (five?) URL/URI RFC's and XML fragments and ... :-) ... is there anything in the post that's inaccurate in *practice*, though? I'd prefer to correct it, if so. – BRPocock Jan 28 '14 at 05:28
  • I did edit the "# means top" comment to be more clear that it's the intended behaviour of an `href`, even though it's probably not the intended behaviour of an `href=#` being used as a host for script events. – BRPocock Jan 28 '14 at 05:31
0

Its just as a place holder since it won't redirect anywhere. It's used for mostly development.
.

Idris
  • 997
  • 2
  • 10
  • 27
0

tag is used for show link. and if you do not mention href attribute then the text is not shown as link...it shown as normal text. so to if you want to show a text as link you have to mantion href attribute. if you don not want any action or redirection then you have use "#" as value of href attribute.

himadri
  • 626
  • 5
  • 19
0

That's a good question, and one that I asked myself alot when starting out. The ahref # symbol is used pretty regularly as a placeholder in the html form. I see it alot with bootstrap, and some .NET projects I modify. Essentially I've seen it used most to say "you can link somewhere, but I don't have anywhere logical to link it in my current example." Cheers to you, and happy developing!

Kasey
  • 307
  • 1
  • 8