What's the use of the hashtag # (number sign) in the links?

While working on a Web page you might see a link that’s like this:

<a href="#">features</a>

href="#" here is a placeholder. Clicking it still scrolls to the top of the page and adds # to the URL.

Sometimes it means the app is in progress, and we’ll fill that link href attribute later on. If a link only triggers JavaScript, a <button> is the better element. If you keep href="#" anyway, stop the default action in the click handler, or the page will scroll up under you.

Other times you’ll see this:

<a href="#features">features</a>

In this case the link references a point in the same page.

Put an id on the element you want to jump to. A heading is the usual target:

<h2 id="features">Features</h2>

You’ll also see an empty <a> used as an anchor, which will be there, but hidden:

<a id="features"></a>

That hidden anchor still works, but you don’t need it anymore. Put the id on the real heading. Any element can have one: a heading, a section, a div.

Clicking the

<a href="#features">features</a>

item will bring you to the element with the id equal to features. The address bar updates to include #features at the end.

The id must be unique on the page. If two elements share id="features", the browser cannot know which one you meant.

To complete this description, if the link is

<a href="/features">features</a>

clicking this the browser will open on a separate URL.

You can also combine those, so

<a href="/features#first">features</a>

will open the /features URL, and will scroll to the element with id="first".

Want me to talk about your product? You can sponsor this site.