How to make an anchor tag refer to nothing?

Question

There are a few less than perfect solutions:

1. Link to a fake anchor

<a href="#">

Problem: clicking the link jumps back to the top of the page

2. Using a tag other than 'a'

Use a span tag and use the jquery to handle the click

Problem: breaks keyboard navigation, have to manually change the hover cursor

3. Link to a javascript void function

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

Problem: breaks when linking images in IE

Solution

Since these all have their problems, the solution I've settled on is to link to a fake anchor, and then return false from the onClick method:

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

Not the most concise of solutions, but it solves all the problems with the above methods.

If you don't want to have it point to anything, you probably shouldn't be using the <a> (anchor) tag.

If you want something to look like a link but not act like a link, it's best to use the appropriate element (such as <span>) and then style it using CSS:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Also, given that you tagged this question "jQuery", I am assuming that you want to attach a click event hander. If so, just do the same thing as above and then use something like the following JavaScript:

$('#fake-link-1').click(function() {
    /* put your code here */
});

To make it do nothing at all, use this:

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

The correct way to handle this is to "break" the link with jQuery when you handle the link

HTML

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

Those final two calls stop the browser interpreting the click.

There are so many ways to do it like

Dont add and href attribute

<a name="here"> Test <a>

You can add onclick event instead of href like

<a name="here" onclick="YourFunction()"> Test <a>

Or you can add void function like this which would be the best way

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

What do you mean by nothing?

<a href='about:blank'>blank page</a>

or

<a href='whatever' onclick='return false;'>won't navigate</a>

This answer should be updated to reflect new web standards (HTML5).

This:

<a tabindex="0">This represents a placeholder hyperlink</a>

... is valid HTML5. The tabindex attribute makes it keyboard focusable like normal hyperlinks. You might as well use the span element for this as mentioned previously, but I find using the a element more elegant.

See: https://w3c.github.io/html-reference/a.html
and: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href