Valid to use <a> (anchor tag) without href attribute?

Question

I've been using Twitter Bootstrap to build a site, and a lot of its functionality depends on wrapping things in <a>, even if they're just going to execute Javascript. I've had problems with the href="#" tactic that Bootstrap's documentation recommends, so I was trying to find a different solution.

But then I tried just removing the href attribute altogether. I've been using <a class='bunch of classes' data-whatever='data'>, and having Javascript handle the rest. And it works.

Yet something's telling me I shouldn't be doing this. Right? I mean, technically <a> is supposed to be a link to something, but I'm not entirely sure why this is a problem. Or is it?

Solution 1

The <a>nchor element is simply an anchor to or from some content. Originally the HTML specification allowed for named anchors (<a name="foo">) and linked anchors (<a href="#foo">).

The named anchor format is less commonly used, as the fragment identifier is now used to specify an [id] attribute (although for backwards compatibility you can still specify [name] attributes). An <a> element without an [href] attribute is still valid.

As far as semantics and styling is concerned, the <a> element isn't a link (:link) unless it has an [href] attribute. A side-effect of this is that an <a> element without [href] won't be in the tabbing order by default.

The real question is whether the <a> element alone is an appropriate representation of a <button>. On a semantic level, there is a distinct difference between a link and a button.

A button is something that when clicked causes an action to occur.

A link is a button that causes a change in navigation in the current document. The navigation that occurs could be moving within the document in the case of fragment identifiers (#foo) or moving to a new document in the case of urls (/bar).

As links are a special type of button, they have often had their actions overridden to perform alternative functions. Continuing to use an anchor as a button is ok from a consistency standpoint, although it's not quite accurate semantically.

If you're concerned about the semantics and accessibility of using an <a> element (or <span>, or <div>) as a button, you should add the following attributes:

<a role="button" tabindex="0" ...>...</a>

The button role tells the user that the particular element is being treated as a button as an override for whatever semantics the underlying element may have had.

For <span> and <div> elements, you may want to add JavaScript key listeners for Space or Enter to trigger the click event. <a href> and <button> elements do this by default, but non-button elements do not. Sometimes it makes more sense to bind the click trigger to a different key. For example, a "help" button in a web app might be bound to F1.

Solution 2

I think you can find your answer here : Is an anchor tag without the href attribute safe?

Also if you want to no link operation with href , you can use it like :

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

Solution 3

Yes, it is valid to use the anchor tag without a href attribute.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

Yes, you can use class and other attributes, but you can not use target, download, rel, hreflang, and type.

The target, download, rel, hreflang, and type attributes must be omitted if the href attribute is not present.

As for the "Should I?" part, see the first citation: "where a link might otherwise have been placed if it had been relevant". So I would ask "If I had no JavaScript, would I use this tag as a link?". If the answer is yes, then yes, you should use <a> without href. If no, then I would still use it, because productivity is more important for me than edge case semantics, but this is just my personal opinion.

Additionally, you should watch out for different behaviour and styling (e.g. no underline, no pointer cursor, not a :link).

Source: W3C HTML5 Recommendation

Solution 4

It is valid. You can, for example, use it to show modals (or similar things that respond to data-toggle and data-target attributes).

Something like:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Here I use the font-awesome icon, which is better as a a tag rather than a button, to show a modal. Also, setting role="button" makes the pointer change to an action type. Without either href or role="button", the cursor pointer does not change.

View more solutions

Comments

[handle]

Possible duplicate of Is an anchor tag without the href attribute safe?

[zzzzBov]

@Zacqary, [role="button"] doesn't do anything concrete, you still need to listen for the click event (but you'd do that anyway to make a JS button). It's meant to be used for assisted navigation (aka screen readers) so that the screen reader knows to represent the element as a button rather than its original semantic value. Adding [tabindex] adds the element to the tabbing order. In special circumstances you might not actually want/need the button navigable in the tabbing order, so it's an optional attribute. Elements that are already buttons don't need [role="button"] as it's redundant.

[Joshua Muheim]

Is it valid HTML to have an anchor tag without href and without name? In our app we have some delete links which are disabled (hence no href attribute), but still shown to the user.

[zzzzBov]

@JoshuaMuheim, I hope you don't mind, but I posted your question as a separate stand-alone question.

[rybo111]

Should actually be javascript:undefined

[Alex]

@rybo111 you're right but I still prefer void(0); basically because it looks better. I don't like my clients to see things as "undefined" ;-)

[diynevala]

<a href="javascript:;">text</a> ?

[Mir]

Just wanted to add a note that if you're using this to create 'buttons' for javascript actions... removing the href attribute entirely will also cause Chrome (and probably other browsers) to stop changing the cursor on mouseover. Obviously this is easy to add back in with CSS - but just a head's up.

[zzzzBov]

@Mir, if you're not going to use [href], you should probably be using a <span> for the button.

[Ilya Streltsyn]

javascript:; used to break things like rollover effects and even gif animations in IE6. And for no link operations there are dedicated HTML elements like button. In the same time, things like AJAX links may use their hrefs for fallback actions if JS fails.

[isherwood]

You should be using a button in this case. It's more appropriate from both semantic and accessibility standpoints. Anchors should take you somewhere, not perform an action. Also, why are you hiding the entire anchor with aria-hidden? The icon, maybe, but screen reader users shouldn't have a diminished experience.

[neiya]

It's not so much about "edge case semantics" but about accessibility, that is making sure that people with disabilities can use and understand the content of a website

[Hrvoje Golcic]

The solution <a role="button" tabindex="0" ...>...</a> is somewhat appealing, but did you try if it's cross-compatible? For example would such links be accessible on iPad?