What is the use of href="###" in an anchor tag?

Question

I see these lines of code in some professional developer's project:

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

What is the use of three # instead of one?

Answer 1

The first thing about "anchor tags"...

This use of ### in particular is to create a links that don't go anywhere, and to do that the href attribute must have a value. Please read the href W3C spec page for more info about that.

Browsers render default styles for elements and will change the default style of an anchor tag that doesn't have the href property. Instead, it will be considered like regular text. It even changes the browser's behavior with regard to the element. The status bar (bottom of the screen) will not be displayed when hovering an anchor without the href property. It is most optimal, then, to use a placeholder href value on an anchor to ensure it is treated as a hyperlink.

I've often seen <a href="#">, and <a href="##"> , a hashtag - # within a hyperlink specifies an html element id to which the window should be scrolled.

href="#some_id" would scroll to an element on the current page such as <div id="some_id">.

href="//example.com/#some_id" would go to example.com and scroll to the id on that page. href="#" doesn't specify an id name, but does have a corresponding location - the top of the page. Clicking an anchor with href="#" will move the scroll position to the top.

So, when you use <a href="###"> this create a links but it doesn't go anywhere. You can use it from "##","###" and more of hashtag to create a links like a "Hyperlinks" but they take you nowhere.

My Conclusion:

So, what is the use of it?

You use it when you need a hyperlink that doesn't go anywhere. It's just to tell the browsers to change the style to an anchor tag.

Check this JSFiddle demo

Answer 2

That's usually written when you want your anchor tag to not change the href. For instance if you want to attach an event on it later on.

It doesn't matter how many # you are using. The href='#' will make the page jump to the top of the page if clicked.

My preferred way is doing <a href="javascript:void(0);". That way the click does absolutely nothing, instead of jumping the page up.

Answer 3

As Bhuiyan's answer said, it is a variation on the href="#" trick...

Goal

So, to explain that trick. The trick is to work around the fact that Anchor tags are only rendered as links if they have a target to link to (see this example). The goal is to create a link that looks like a link, but doesn't actually go anywhere.

How it works

The href="#" idiom is taking advantage of the fact that anchors can specify a specific element as a target by using the href="#{other element identifier}]" notation. When you do this the browser will not redirect or reload the page, but instead scroll to that element. So when you specify href="#" you are essentially telling the browser that this is a link, but since there is no valid target element please don't do anything when it is clicked.

Note: It would work just as effectively to say href="#mybogusid" but then you would see #mybogusid appended to the url. Gross.

TL;DR of it all: <a href="###"> is just a way to make the browser render the anchor tag like a link, but not navigate anywhere on click.

Answer 4

I think this is same as <a href="#">Go to link</a> that person just used three "###" instead of one "#". we can use more # if we want.

Answer 5

It was very useful when i had button and js click event. With '#' it scrolled to top every time i pressed the button, but with '###' it stayed in place as needed!