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?
This question is related to
html
anchor
semantic-markup
htmlbutton
Yes, it is valid to use the anchor tag without a href
attribute.
If the
a
element has nohref
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
, andtype
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
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.
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>
Source: Stackoverflow.com