Make an HTML link that does nothing (literally nothing)

Question

I want a link that does nothing. I do not want it:

<a href="#">

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

The only reason I want the link is because the user can see that they can click on the text. JavaScript is used to do some things, so I don’t need a 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 the elements look like links if they have this attribute, but it seems a bit overkill.

Answer 1

The following will prevent href from starting

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

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

Answer 2

Try the following:

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

Answer 3

Do not make a link (although this is preferable) and create it using CSS to make it look like a link:

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

Or even better, just make a link and let javascript use e.preventDefault() to prevent the link.

Also add a link to href so that non-JS users can still use it (as a backup).

Answer 4

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

Answer 5

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

 <a>Do Nothing</a> 

From MDN in the href tag attribute :

Href

This was the only required attribute for bindings defining a link to the source of the hypertext, but is no longer required in HTML5.

How about a mouse cursor on hover?

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

 a { cursor: pointer; } 

 <a>Do Nothing</a> 

However, it is probably best to be more selective in this regard and apply it only to those elements that you intend to add to event handlers.

How to make it add-on?

Just add tabindex="0" to the element.

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

Does it make sense to use the a tag without a link?

Usually not, it's probably best to use a button element and style it with CSS. But no matter what you use, avoid using an arbitrary element such as a div when possible, as this is not semantic.

Answer 6

@ Kurt's answer will work, but you can use the cursor style in css to make it look like a link without worrying about creating a dummy link. Use a pen or pointer depending on browser compliance.

Cross browser pointer css (from cursor style guide ):

 element { cursor: pointer; cursor: hand; } 

Answer 7

SHOULD NOT use <a> ... use <span class='style-like-link'> instead and then use the class to style it, but you want to.

Answer 8

one of the ways that no one mentioned is to point href to an empty local file location, e.g.

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

why? If you use a framework such as a reaction or angular, the compiler will spit out some warnings that may cause your log or console to become dirty. This method will also prevent the incorrect linking of robots or spiders.