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  lt a gt   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  lt a class  bunch of classes  data-whatever  data  gt   and having Javascript handle the rest  And it works   Yet something s telling me I shouldn t be doing this  Right  I mean  technically  lt a gt  is supposed to be a link to something  but I m not entirely sure why this is a problem  Or is it

User · Accepted Answer

The  lt a gt nchor element is simply an anchor to or from some content  Originally the HTML specification allowed for named anchors   lt a name  foo  gt   and linked anchors   lt a href   foo  gt     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  lt a gt  element without an  href  attribute is still valid   As far as semantics and styling is concerned  the  lt a gt  element isn t a link   link  unless it has an  href  attribute  A side-effect of this is that an  lt a gt  element without  href  won t be in the tabbing order by default   The real question is whether the  lt a gt  element alone is an appropriate representation of a  lt button gt   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  lt a gt  element  or  lt span gt   or  lt div gt   as a button  you should add the following attributes    lt a role  button  tabindex  0      gt     lt  a gt    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  lt span gt  and  lt div gt  elements  you may want to add JavaScript key listeners for Space or Enter to trigger the click event   lt a href gt  and  lt button gt  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

User · Answer

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  lt a gt  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

User · Answer

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    lt a role  button  data-toggle  modal  data-target   bs-example-modal-sm  aria-hidden  true  gt  lt i class  fa fa-phone  gt  lt  i gt  lt  a gt    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

User · Answer

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      lt a href  javascript void 0    gt something lt  a gt

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

Examples related to html

Examples related to anchor

Examples related to semantic-markup

Examples related to htmlbutton