Make a HTML link that does nothing (literally nothing)

Question

I want a link that does nothing. I don't want this:

<a href="#">

because then the URL becomes something.com/whatever/#.

The only reason I want a link is so the user can see that they can click on the text. JavaScript is being used to perform some action so I don't need the link to go anywhere but I need it to look like a link!

I could use some data attribute and tell me CSS to make elements look like links if they have this attribute but it seems a bit overkill.

you could give it an href of blank and return false in the the javascript. But it's more semantic if you just change the cursor property to `pointer` in your CSS — JohnP, Nov 24 '11 at 17:11
@CharlesSprayberry: There are situations that you don't want it. — PeeHaa, Nov 24 '11 at 17:15
This would be a good question to ask on http://ux.stackexchange.com/ as well. — , Nov 24 '11 at 18:53
This question is discussed in more depth here: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 — DawnPaladin, Dec 09 '14 at 21:05
# causes the browser to jump to the top of the page. It also updates the hash property which can affect your code. — Anthony Mason, Aug 01 '19 at 14:02

score 148 · Accepted Answer · answered Nov 24 '11 at 17:11

148

The following will prevent your href from being ran

<a href="#" onclick="return false;">

If you are using jQuery, event.preventDefault() can be used

answered Nov 24 '11 at 17:11

Curtis

101,612
66
270
352

3

Causes additional onclick events to be cancelled. – Rauli Rajande Aug 24 '17 at 14:45
15

Causes page to scroll to the top. – David Hempy Dec 06 '17 at 06:00
@DavidHempy I don't experience this. Which browser? – Curtis Dec 06 '17 at 10:01
2

@curt Google Chrome Version 63.0.3239.84 (Official Build) (64-bit) (or possibly a slightly-older version two weeks ago) – David Hempy Dec 20 '17 at 20:43
This doesnt work for wordpress plugin scroll to id and link will still do something. In this case, it will be buggy thing that will redirect you on the top of the page. – Jiri Otoupal イりオトウパー May 06 '20 at 14:59
If `href="#"` causes issues try `href=""`. – Victoria Stuart May 27 '23 at 18:35

score 128 · Answer 2 · edited Jul 12 '17 at 00:00

128

Try this:

<a href="javascript:void(0);">link</a>

edited Jul 12 '17 at 00:00

Weston Ganger

6,324
4
41
39

answered Nov 24 '11 at 17:13

alexdets

1,473
1
8
3

6

+1 but quick question: is there a difference between `javascript:void` and `javascript:void(0)`? – Adam Rackis Nov 24 '11 at 17:21
4

If you will try use javascript:void(0) without param you will have SyntaxError and all your scripts will be failed. – alexdets Nov 25 '11 at 01:55
3

@alexdets `javascript:void()` will be SyntaxError, but `javascript:void` just returns undefined - same as `void(0)`. Adam, as far as I can tell, `void` and `void(0)` are functionally equivalent for this use. --- edit: although i see other comments that hint it might reload the page.. – andytuba Feb 27 '13 at 21:39
3

Does it matter how you capitalize javaScript/javascript/JavaScript/Javascript ? – Timothy Apr 22 '16 at 05:19
2

@TechyTimo No the capitalization does not matter, in-fact it should not be capitalized. I have submitted an edit. – Weston Ganger Jul 11 '17 at 17:31
4

This yields warnings, if your application uses [CSP Directives](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) that block inline script execution. Additionally, it's better to just write `javascript:;`, which has the same effect as your solution, but requires less characters to type. – Pawel Dobierski Sep 18 '19 at 22:13

score 57 · Answer 3 · answered Apr 02 '16 at 19:32

In HTML5, this is very simple. Just omit the href attribute.

<a>Do Nothing</a>

From MDN on the a tag href attribute:

href

This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5.

What about the hand cursor on hover?

The default styles for a browser may not change the cursor to a pointer, for a tags with no href. You can universally change this with the following CSS.

a {
    cursor: pointer;
}

<a>Do Nothing</a>

However it's probably better to be more-selective about it, and apply it to only the elements you intend to add event handlers to.

What about making it tab-focusable?

Just add tabindex="0" to the element.

<a tabindex="0">Do Nothing</a>

Does it makes sense to use an `a` tag without a link?

Usually no, it's probably better to use a button element instead, and style it with CSS. But whatever you use, avoid using an arbitrary element like div when possible, as this is not semantic at all.

With bootstrap 4, links that don't have an href don't get styled as links. — user3413723, Jul 17 '19 at 16:30
If you need to retain formatting due to some css definitions you can't fix or don't want to mess with, the href attribute maybe needed. The void(0) solution is better in that case. — Steve Horvath, Jun 21 '21 at 01:15
Something really random to note: if you're worried about WCAG compliance, this approach won't satisfy their requirements — Dortimer, Aug 19 '22 at 17:59

score 13 · Answer 4 · answered Mar 20 '21 at 02:29

13

Proper:

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

answered Mar 20 '21 at 02:29

Michael Fever

845
2
8
26

3

Yes, '#' is defined as the top of the page, but any fragment string that doesn't match the id or name of an element in the document will do. https://html.spec.whatwg.org/multipage/browsing-the-web.html#find-a-potential-indicated-element – Chris Kerlin May 26 '22 at 22:56
2

This is the only answer that works when you want to specify a no-action link in markdown. For example, when you have a project on GitHub and you want to use GitHub badges in your README.md, as I am doing here: https://github.com/mikenakis/Bathyscaphe, and you want some of the badges to not link to anything when clicked. All other solutions will either take you to the top of the page, or take you to another page that shows just the badge. This is the only solution that really does nothing. – Mike Nakis May 29 '22 at 11:42

PeeHaa · Answer 5 · 2013-02-27T21:28:43.533

13

Don't make it a link (although it is prefered to do it) and style it with CSS so that it looks like a link:

p.not-a-link { text-decoration: underline; cursor: pointer }

Or even better just make it a link and let the javascript function which is used e.preventDefault() to prevent the link.

Also add the link to the href so that users without JS enabled will still be able to use it (as a fallback).

edited Feb 27 '13 at 21:28

answered Nov 24 '11 at 17:13

PeeHaa

71,436
58
190
262

1

+1 With the IE5.5 debate concluded, would a span be better than a p? – amelvin Nov 24 '11 at 22:49
2

I prefer span. P could make a new row, while span doesnt – Ronnie Oosting Sep 29 '17 at 06:17

score 11 · Answer 6 · 2011-11-24T17:23:48.507

11

<a href="javascript:;">Link text</a> - that's what I usually use

edited Nov 24 '11 at 17:23

answered Nov 24 '11 at 17:11

6

Won't this reload the page with some browsers? – Curtis Nov 24 '11 at 17:12
@Curt: You;re right, mis-read the question. You've got a comment upvote out of it :-) – Nov 24 '11 at 17:15
... and I've got 2 downvotes, including one after editing it! Harsh! – Nov 24 '11 at 17:17
Remove the first code, then I'll be allowed to remove my down vote :) It wont let me remove the downvote, its "locked" – Curtis Nov 24 '11 at 17:23
Ta. My rep's up and down like Tower Bridge at the moment! – Nov 24 '11 at 17:26
1

Which browsers does this affect, is it still an issue anymore? This would be preferred over `void(0)`, because it's surfaced in the status bar. I say that because I've users flag it as a bug/error (which it obviously isn't), so I think having it t is confusing to them. – patricknelson May 03 '18 at 02:08

score 4 · Answer 7 · answered Aug 01 '18 at 12:50

We can achieve that using javascript void which normally involves evaluation of an expression and returning undefined, which includes adding javascript:void(0); on the href.

The void operator is usually used merely to obtain an undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).

a {
  text-decoration: initial;
}

<a href="javascript:void(0);"> This link actually does nothing when clicked</a>

score 2 · Answer 8 · answered Sep 29 '17 at 06:14

one way which no one has mentioned is to point the href to an empty local file location like so

<a href='\\'>my dead link</a>

why? If you use a framework such as react or angular, the compiler will spit out some warnings which can make your log or console dirty. This technique will also prevent robots or spiders from incorrectly linking things.

score 2 · Answer 9 · answered Nov 24 '11 at 17:16

2

@Curt's answer will work, but you can use a cursor style in css to make it look like a link without the bother of generated a bogus link. Use hand or pointer depending on browser conformance.

Cross browser conformant pointer css (from cursor style guide):

element {
    cursor: pointer;
    cursor: hand;
}

answered Nov 24 '11 at 17:16

amelvin

8,919
4
38
59

@PeeHaa Just use pointer only if you *don't* want it to work in IE5.5 and earlier! – amelvin Nov 24 '11 at 17:20
3

That's what I said! Please don't mention IE5.5 :P On a more serious note IE5.5 share is `0.17%`. If people still are on that version they don't deserve to browse the web – PeeHaa Nov 24 '11 at 17:23

score -1 · Answer 10 · answered May 31 '21 at 02:08

-1

just remove the href attribute. it's not necessary.

<a> a link </a>

answered May 31 '21 at 02:08

Amir Keramat

384
4
10

score -1 · Answer 11 · answered Jan 24 '22 at 01:56

What if you use only css?

pointer-events: none;

span, a {
    color: black;
    cursor: default;
    pointer-events: none;    
    text-decoration: none;
}

<span>Normal text --> <a href="https://google.com">Link to google click me</a> <-- another text</span>

score -2 · Answer 12 · answered Aug 26 '22 at 22:59

-2

Text goes here When clicked this link will do nothing except display a little javascript:void(0) in the corner

answered Aug 26 '22 at 22:59

ME ME

1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 31 '22 at 15:12

score -3 · Answer 13 · answered May 18 '17 at 23:05

-3

DONT USE <a>... instead use <span class='style-like-link'> and then use the class to style it however you want.

answered May 18 '17 at 23:05

Bryce

988
9
16

There's nothing wrong with using an anchor tag without a link itself, not to mention that there are many cases where it would make a lot _more_ sense to do so, rather than replace it with a pseudo-anchor tag. Not to mention styling one element to look like another but be implemented differently is bound to cause maintanence issues in the future – Tim Dec 08 '19 at 23:59
Agreed. It entirely depends on the use-case and what you're trying to accomplish. I merely provided this as an answer to help others know that this is AN option. – Bryce Dec 10 '19 at 00:05
If that's the case, I would suggest editing it to use language that shows it's a possible alternative, rather than stating in caps not to use a standard anchor tag for this, when it's perfectly valid to do so – Tim Feb 05 '20 at 02:19

Make a HTML link that does nothing (literally nothing)

13 Answers13

What about the hand cursor on hover?

What about making it tab-focusable?

Does it makes sense to use an `a` tag without a link?

Linked

Make a HTML link that does nothing (literally nothing)

13 Answers13

What about the hand cursor on hover?

What about making it tab-focusable?

Does it makes sense to use an a tag without a link?

Linked

Does it makes sense to use an `a` tag without a link?