What is it when a link has a pound "#" sign in it

Question

I have inspected some sites and they have a pound(#) sign in the url. What does it do?

 <a href="#" >Link name</a>

score 115 · Accepted Answer · answered May 10 '10 at 03:47

115

It's a "fragment" or "named anchor". You can you use to link to part of a document. Typically when you link to a page, the browser opens it up at the top of the page. But you link to a section half-way down, you can use the fragment to link to that heading (or whatever).

If there is no <a name="whatever"/> tag within the page, then the browser will just link to the top of the page. If the fragment is empty, then it will also just link to the top of the page.

For a fragment only <a href="#">Link name</a>, then that's just a link to the top of the current page.

You often see that kind of link used in conjuction with javascript. Standards compliant HTML requires a href attribute, but if you're planning to handle the request with javascript then "#" serves as a reasonable place holder.

answered May 10 '10 at 03:47

Dean Harding

71,468
13
145
180

1

+1 Although the official term is a URL fragment, not a "hash reference": http://www.w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1 – Jason Hall May 10 '10 at 03:49
Yeah, I changed it to "fragment" in my answer, cause that's what most people use. I never knew it had an "official" name though :) – Dean Harding May 10 '10 at 03:50
2

Why browsers treat it as 'go to top of page': Technically, you changed the page. After clicking the link, you'll notice that the # is actually added to the URL in the address bar, and if you click the back button it will remove it again. I wouldn't say it's a link to part of a document, more a link to a place inside the document. Otherwise, basically the same thing I was typing... – animuson May 10 '10 at 03:51
A URI ending with # is permitted by the generic syntax and could be considered as a kind of empty fragment. In MIME document types such as text/html or any XML type, empty identifiers to match this syntactically legal construct are not permitted. Web browsers typically display the top of the document for an empty fragment. -- https://en.wikipedia.org/wiki/Fragment_identifier – IcyBrk Jun 27 '17 at 14:31
Also by "If no such representation exists, then the semantics of the fragment are considered unknown and are effectively unconstrained. " From rfc3986(https://tools.ietf.org/html/rfc3986#page-24) – IcyBrk Jun 27 '17 at 14:39

alex · Answer 2 · 2011-05-12T23:23:59.267

26

... just to add a few extra useful tips.

You can access and change it with document.location.hash in JavaScript.

It can point to a named anchor (e.g. <a name="top"></a>) or to an element with a corresponding id (e.g. <div id="top"></div>).

Seeing one on its own (e.g. <a href="#" onclick="pop()">popup</a>) generally means a link is being used to run JavaScript exclusively. This is bad practice.

Any a element should have a href that points to a valid resource. If one does not exist, consider using another element, such as button.

edited May 12 '11 at 23:23

answered May 10 '10 at 04:06

alex

479,566
201
878
984

1

That's a good point about it not particularly good practise... but just because it's not good doesn't mean you won't find it being used like that all over the place :) – Dean Harding May 10 '10 at 04:25
1

@alex, if it's bad practice, then tell us what the *good* practice would be to use instead. – Ryan Lundy May 12 '11 at 21:20
@Kyralessa It was right there in the next paragraph. Anyway, I made an edit so hopefully it is clearer. – alex May 12 '11 at 23:23
2

@alex, presumably one reason people are using links instead of buttons is that they want the look of links. How about a link to a page describing how to make a button look like a link? E.g. [HTML button test](http://jontangerine.com/silo/html/button/) – Ryan Lundy May 12 '11 at 23:33
@Kyralessa That's a bit outside of the scope of the question. – alex May 12 '11 at 23:55
1

@alex, no more than is saying that using # on a link is bad practice. All the OP asked is what it does. – Ryan Lundy May 13 '11 at 02:15
@Kyralessa No, because it is directly useful information to the question. If I asked *how to walk in front of traffic*, would you give me a guide or tell me it's a bad idea? – alex May 13 '11 at 02:20
@alex, I would tell you to go to the crosswalk, push the little button, and wait for the sign to say WALK. – Ryan Lundy May 13 '11 at 02:26
There are many sites using `!` with `#` like __www.domain.com/#!index.php/?a=1&b=2__ , sites like - twitter , facebook when we open images[when opened in ie]. what does `#!` actually means – Abhishek Gupta Jun 25 '12 at 09:17
I don't think this is bad practice in modern web design anymore, since nowadays it's common for web developers to create buttons out of tags using css. However, when doing this, it's better to use `href='javascript:void(0);'`, as this avoids the link jumping to the top of the page when clicked. – rurouniwallace Oct 16 '15 at 14:01
@Ataraxia I'd say it's still bad practice, use a `button` if it's not a link to anywhere. Using the `javascript:` protocol to get around the expected behaviour should be clear enough it's the wrong tool. – alex Oct 18 '15 at 11:37

score 12 · Answer 3 · edited Jun 03 '15 at 23:55

The pound sign (#) indicates to locate an anchor on the page. For example, if you include this somewhere on the page:

<a name="foo"></a>

or, more recently:

<div id="foo">*part of page*</div>

and then you click on a link on the page that has the href #foo, it will navigate to the anchor with the name or div with the id foo.

However, if you just have the href #, it will lead to the top of the page.

score 11 · Answer 4 · answered May 10 '10 at 04:38

11

# indicates a link to an anchor.

I thougt I'd also mention something else:

Using '#' as the href for a link that activates JavaScript is bad because it scrolls the page to the top - which is probably not what you want. Instead, use javascript:void(0).

answered May 10 '10 at 04:38

Nathan Osman

71,149
71
256
361

+1 for mentioning that clicking on these links forces the page to scroll to the top. – Chris Calo Nov 06 '12 at 03:49
4

You no longer need an anchor. As of HTML5 (and maybe HTML 4) any element with an tag may be targeted by a fragment identifier. See HTML5 docs: http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid – Basil Bourque Jan 17 '13 at 03:43
3

Don't use `javascript:void(0)` either - use a `button` if it's not a link. – alex Apr 06 '15 at 23:49

score 2 · Answer 5 · answered May 10 '10 at 03:45

2

This links back to the page itself. It's often used with links which actually run some JavaScript.

answered May 10 '10 at 03:45

Stokely · Answer 6 · 2022-08-26T05:37:58.447

I think most of the posters here forgot how to use Internal Links.

A typical <a> element uses an href attribute to link to an external URL/URI (website). But most new developers do not realize you can also link to internal sections of your web page by using a "#" and an identifier instead. The easiest way to do this cross-browser, is using the following HTML:

This page link...

<a href="#section1">Go to Section 1</a>

...goes to this page location.

<a id="section1" name="section1"></a>

The "#section1" href value is called a "fragment identifier" and will appear in your browser's url when you click the link. Your page will then look for this identifier in your HTML page and automatically scroll down the page to it.

Notice I have used the anchor <a> tag as my receiver to the link. Traditionally this is how most web pages used to use these types of page links. Using anchors you avoid having to rename existing elements. It is also semantically correct and a better way to manage these types of bookmarks. But....it's ok practice to use a <div> or other HTML element with an id and name matching attribute assigned as the bookmark for the fragment identifier.

I like to use both id and name attributes with the fragment identifier, as HTML5 often does not support the name attribute on some elements, while id may not be recognized for the page marker identifier in older browsers.

This shortened, nameless version below is often used by developers as a default URL "stub" for an unknown URL added later to an anchor, to trigger a page refresh, or enable a link but let a Javascipt method capture the click event and route off somewhere else. This makes the "#" a nice fallback should the Javascript piece fail. It then becomes a nice Javascript-free refresh link. The "#" can also be a useful URL "filler for the "href" value when a missing or blank URL on an element might otherwise trigger some problem or style:

<a href="#">Go to the Top</a>

score 0 · Answer 7 · answered May 06 '21 at 04:19

The specific question was "I have inspected some sites and they have a pound(#) sign in the url. What does it do?"

An example is then given:
<a href="#" >Link name</a>

A consistent valid answer is given for jumplinks (whatever you want to call them) however the CSS :target psuedoselector would absolutely makes use of the hash in a URL as well.

It doesn't change the answers. However gives another use case I thought would be valuable, to not belabor, see the below excellent link which explains:

However, https://css-tricks.com/on-target/

What is it when a link has a pound "#" sign in it

7 Answers7

Linked

Related