258

Is it okay to use an anchor tag without including the href attribute, and instead using a JavaScript click event handler? So I would omit the href completely, not even have it empty (href="").

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
john
  • 2,613
  • 2
  • 17
  • 7

9 Answers9

240

In HTML5, using an a element without an href attribute is valid. It is considered to be a "placeholder hyperlink."

Example:

<a>previous</a>

Look for "placeholder hyperlink" on the w3c anchor tag reference page: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element.

And it is also mentioned on the wiki here: https://www.w3.org/wiki/Elements/a

A placeholder link is for cases where you want to use an anchor element, but not have it navigate anywhere. This comes in handy for marking up the current page in a navigation menu or breadcrumb trail. (The old approach would have been to either use a span tag or an anchor tag with a class named "active" or "current" to style it and JavaScript to cancel navigation.)

A placeholder link is also useful in cases where you want to dynamically set the destination of the link via JavaScript at runtime. You simply set the value of the href attribute, and the anchor tag becomes clickable.

See also:

Community
  • 1
  • 1
dthrasher
  • 40,656
  • 34
  • 113
  • 139
37

My advice is use <a href="#"></a>

If you're using JQuery remember to also use:

.click(function(event){
    event.preventDefault();
    // Click code here...
});
random-forest-cat
  • 33,652
  • 11
  • 120
  • 99
Gunnar Hoffman
  • 1,226
  • 1
  • 11
  • 11
32

If you have to use href for backwards compability, you can also use

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

instead of # ,if you don't want to use the attribute

Rasive
  • 1,143
  • 1
  • 8
  • 20
24

Short answer: No.

Long answer:

First, without an href attribute, it will not be a link. If it isn't a link then it wont be keyboard (or breath switch, or various other not pointer based input device) accessible (unless you use HTML 5 features of tabindex which are not universally supported). It is very rare that it is appropriate for a control to not have keyboard access.

Second. You should have an alternative for when the JavaScript does not run (because it was slow to load from the server, an Internet connection was dropped (e.g. mobile signal on a moving train), JS is turned off, etc, etc).

Make use of progressive enhancement by unobtrusive JS.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • The problem is, I want something I can attach a click event to with jQuery's "click" method, that also gets highlighted and underlined like a link when the mouse rolls over it. What else, besides an href-less anchor tag can accomplish that with no CSS? (i.e. as-is without manually adding that basic interaction, while retaining the simplicity of a direct click function assignment via jQuery). – Triynko Nov 17 '11 at 17:28
  • @Triynko — Use a link, but do it properly. See the last line of the answer. – Quentin Nov 17 '11 at 17:31
  • 6
    Tabindex on 'a' tags has been valid since HTML4 (at least) http://www.w3schools.com/tags/att_global_tabindex.asp – technoTarek Oct 20 '13 at 21:04
  • @technoTarek — Yes, but `href` was mandatory (unless it was a named anchor in which case tabindex didn't make sense). The use of `tabindex` to add unfocusable elements to the tab order is a new innovation in HTML 5. – Quentin Jun 02 '16 at 07:55
  • @michael — The question says "safe" not "valid". I justified why it was unsafe, and everything I said then is still true. – Quentin Jul 12 '16 at 21:41
  • It's not unsafe. If you're worried about keyboard navigation you can set `tabindex` like technoTarek already stated. You're also wrong stating `href` is mandatory. Directly from the HTML4 spec it states: "Authors may also create an A element that specifies no anchors, i.e., that doesn't specify href, name, or id." Creating an anchor without an `href` attr is (1) perfectly valid HTML, (2) perfectly safe, (3) useful in several situations. I won't comment any further, but your answer is simply wrong.. At the very least, concede your "short answer" is extremely misleading. – michael Jul 13 '16 at 20:22
  • @michael — It is unsafe. Depending on the JS to successfully run is still unsafe. I will conceed that my comment about href being mandatory was wrong. – Quentin Jul 13 '16 at 20:27
  • @michael — "If you're worried about keyboard navigation you can set tabindex like technoTarek already stated" — You mean like I mentioned in the answer when I wrote it over half a decade ago? – Quentin Jul 13 '16 at 20:36
  • As for "concede your "short answer" is extremely misleading" … the entire point of putting a long answer is to provide context for the short answer. – Quentin Jul 13 '16 at 20:37
  • `tabindex` is not an HTML5 feature. Using an `a` element without an `href` attribute is valid HTML4. Using a `tabindex` attribute on said element without an `href` attribute is also valid HTML4. Your "long answer" with "context" is equally as wrong as your "short answer." I fail to see what you're not understanding. If someone comes to this page and sees your answer, they're going to walk away with an incorrect understanding and more importantly an answer that's simply wrong. Anyways, comments aren't for long discussions, so my apologies for even replying. I won't be replying further. – michael Jul 13 '16 at 20:46
  • @michael — "tabindex is not an HTML5 feature" I never said it was. – Quentin Jul 13 '16 at 20:52
  • @michael — "Using an a element without an href attribute is valid HTML4" — I didn't claim that it was in the answer, and I have already said that the earlier comment I made was wrong on that point. – Quentin Jul 13 '16 at 20:53
  • @michael — You keep agreeing with me while claiming that I'm wrong. – Quentin Jul 13 '16 at 20:53
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/117265/discussion-between-michael-and-quentin). – michael Jul 14 '16 at 00:38
13

The tag is fine to use without an href attribute. Contrary to many of the answers here, there are actually standard reasons for creating an anchor when there is no href. Semantically, "a" means an anchor or a link. If you use it for anything following that meaning, then you are fine.

One standard use of the a tag without an href is to create named links. This allows you to use an anchor with name=blah and later on you can create an anchor with href=#blah to link to the named section of the current page. However, this has been deprecated because you can also use IDs in the same manner. As an example, you could use a header tag with id=header and later you could have an anchor pointing to href=#header.

My point, however, is not to suggest using the name property. Only to provide one use case where you don't need an href, and therefore reasoning why it is not required.

monokrome
  • 1,377
  • 14
  • 21
12

From an accessibility perspective <a> without a href is not tab-able, all links should be tab-able so add a tabindex="0" if you don't have a href.

ggorlen
  • 44,755
  • 7
  • 76
  • 106
user3862605
  • 389
  • 4
  • 7
8

The <a> tag without the "href" can be handy when using multi-level menus and you need to expand the next level but don't want that menu label to be an active link. I have never had any issues using it that way.

Jon
  • 81
  • 2
  • 2
    Have you tried accessing that menu with the keyboard? – aij Mar 22 '16 at 16:40
  • I just found out that on IE, if you hover over some links and one is an anchor without href, the small popup with the URL below stays there, showing the previous url, instead of disappearing. The anchor is not clickable though, so it's not big issue, but enough for me to go with a div instead. – Andrew Jun 09 '17 at 00:34
2

In some browsers you will face problems if you are not giving an href attribute. I suggest you to write your code something like this:

<a href="#" onclick="yourcode();return false;">Link</a>

you can replace yourcode() with your own function or logic,but do remember to add return false; statement at the end.

isherwood
  • 58,414
  • 16
  • 114
  • 157
shashwat13
  • 108
  • 6
  • I'm using Backbone.js with Backbone.Router and have `#` for the index page. For some of my navbar links I don't want to trigger a route to `#` which is what happens if you use `a href="#"` by itself. Using ` – David Williamson May 22 '15 at 10:33
0

Just add bellows code in your working component on top to remove this warning, that's it.

/* eslint-disable jsx-a11y/anchor-is-valid */

Md Sajedul Islam
  • 1,041
  • 1
  • 6
  • 10