Is an anchor tag without the href attribute safe?

HtmlHyperlinkStandardsAnchor

Html Problem Overview


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

Html Solutions


Solution 1 - Html

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:

Solution 2 - Html

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

If you're using JQuery remember to also use:

.click(function(event){
    event.preventDefault();
    // Click code here...
});

Solution 3 - Html

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

Solution 4 - Html

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.

Solution 5 - Html

Solution 6 - Html

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.

Solution 7 - Html

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.

Solution 8 - Html

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjohnView Question on Stackoverflow
Solution 1 - HtmldthrasherView Answer on Stackoverflow
Solution 2 - HtmlGunnar HoffmanView Answer on Stackoverflow
Solution 3 - HtmlRasiveView Answer on Stackoverflow
Solution 4 - HtmlQuentinView Answer on Stackoverflow
Solution 5 - HtmlmonokromeView Answer on Stackoverflow
Solution 6 - Htmluser3862605View Answer on Stackoverflow
Solution 7 - HtmlJonView Answer on Stackoverflow
Solution 8 - Htmlshashwat13View Answer on Stackoverflow