Make a HTML link that does nothing (literally nothing)
HtmlCssHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
The following will prevent your href from being ran
<a href="#" onclick="return false;">
If you are using jQuery, event.preventDefault()
can be used
Solution 2 - Html
Try this:
<a href="javascript:void(0);">link</a>
Solution 3 - Html
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>
a
tag without a link?
Does it makes sense to use an 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.
Solution 4 - Html
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).
Solution 5 - Html
<a href="javascript:;">Link text</a>
- that's what I usually use
Solution 6 - Html
Proper:
<a href="#;">Link</a>
Solution 7 - Html
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 href="javascript:void(0);"> This link actually does nothing when clicked</a>
a {
text-decoration: initial;
}
Solution 8 - Html
@Curt's answer will work, but you can use a http://www.quirksmode.org/css/cursor.html">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 http://www.quirksmode.org/css/cursor.html">cursor style guide):
element {
cursor: pointer;
cursor: hand;
}
Solution 9 - Html
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.
Solution 10 - Html
just remove the href
attribute. it's not necessary.
<a> a link </a>
Solution 11 - Html
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>
Solution 12 - Html
DONT USE <a>
... instead use <span class='style-like-link'>
and then use the class to style it however you want.