CODEWITHSUNDEEP
htmlcss
ale
ale

Reputation: 11830

Make a HTML link that does nothing (literally nothing)

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.

Upvotes: 133

Views: 185400

Answers (13)

ME ME
ME ME

Reputation: 11

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

Upvotes: -1

mandel99
mandel99

Reputation: 124

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>

Upvotes: 0

Amir Keramat
Amir Keramat

Reputation: 394

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

<a> a link </a>

Upvotes: -1

Michael Fever
Michael Fever

Reputation: 865

Proper:

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

Upvotes: 15

Krafty Coder
Krafty Coder

Reputation: 131

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>

Upvotes: 8

p3nGu1nZz
p3nGu1nZz

Reputation: 1715

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.

Upvotes: 2

alexdets
alexdets

Reputation: 1583

Try this:

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

Upvotes: 138

Bryce
Bryce

Reputation: 1068

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

Upvotes: -3

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60577

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.

Upvotes: 61

PeeHaa
PeeHaa

Reputation: 72681

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).

Upvotes: 13

user527892
user527892

Reputation:

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

Upvotes: 11

amelvin
amelvin

Reputation: 9061

@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;
}

Upvotes: 2

Curtis
Curtis

Reputation: 103388

The following will prevent your href from being ran

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

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

Upvotes: 150

Related Questions