Can I nest a button element inside an a using HTML5

Question

I am doing the following     lt a href  www stackoverflow com  gt      lt button disabled  disabled   gt ABC lt  button gt    lt  a gt      This works good but I get a HTML5 validation error that says  Element  button  must not be nested within element  a button    Can anyone give me advice on what I should do

User · Answer

It is illegal in HTML5 to embed a button element inside a link.

Better to use CSS on the default and :active (pressed) states:

_x000D_

body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */_x000D_
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}_x000D_
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}_x000D_
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}

_x000D_

<p><a class="Button" href="www.stackoverflow.com">Click me<a>

_x000D_

User · Answer

It would be really weird if that was valid  and I would expect it to be invalid   What should it mean to have one clickable element inside of another clickable element   Which is it -- a button  or a link

User · Answer

x000D   x000D   lt a href  index html  gt  x000D     lt button type  button  gt Submit lt  button gt  x000D   lt  a gt  x000D   x000D   x000D   Or you can use java script in button as    x000D   x000D   lt button type  submit  onclick  myFunction    gt Submit lt  button gt  x000D   lt script gt  x000D    function myFunction     x000D        var w   window open file    E  Aditya 20panchal index html   x000D        x000D   lt  script gt  x000D   x000D   x000D

User · Answer

You can add a class to the button and put some script redirecting it   I do it this way    lt button class  buttonClass  gt button name lt  button gt    lt script gt      buttonClass   click function    window location href    http   stackoverflow com        lt  script gt

User · Answer

Another option is to use the onclick attribute of the button    lt button disabled  disabled  onClick  location href  www stackoverflow com    gt ABC lt  button gt    This works  however  the user won t see the link displayed on hover as they would if it were inside the  element

User · Answer

Explanation and working solution here   Howto  div with onclick inside another div with onclick javascript  by executing this script in your inner click handler    if   e  var e   window event   e cancelBubble   true   if  e stopPropagation  e stopPropagation

User · Answer

No   The following solution relies on JavaScript    lt button type  button  onclick  location href  http   www stackoverflow com   gt ABC lt  button gt    If the button is to be placed inside an existing  lt form gt  with method  post   then ensure the button has the attribute type  button  otherwise the button will submit the POST operation  In this way you can have a  lt form gt  that contains a mixture of GET and POST operation buttons

User · Answer

These days even if the spec doesn t allow it  it  seems  to still work to embed the button within a  lt a href    gt  lt button     gt  lt  a gt  tag  FWIW

User · Answer

why not  you can also embeded picture on button as well   lt FORM method    POST  action    https   stackoverflow com  gt        lt button type  submit  name  Submit  gt           lt img src  img Att hack png  alt  Text  gt       lt  button gt   lt  FORM gt

User · Answer

Use formaction attribute inside the button  PS  It only works if your button type  submit    lt button type  submit  formaction  www youraddress com  gt Submit lt  button gt

User · Answer

I ve just jumped into the same issue and I solved it substituting  button  tag to  span  tag  In my case I m using bootstrap  This is how it looks like    lt a href   register  gt        lt span class  btn btn-default btn-lg  gt          Subscribe      lt  span gt   lt  a gt

User · Answer

No  it isn t valid HTML5 according to the HTML5 Spec Document from W3C   Content model  Transparent  but there must be no interactive content descendant  The a element may be wrapped around entire paragraphs  lists  tables  and so forth  even entire sections  so long as there is no interactive content within  e g  buttons or other links    In other words  you can nest any elements inside an  lt a gt  except the following    lt a gt    lt audio gt   if the controls attribute is present    lt button gt    lt details gt    lt embed gt    lt iframe gt    lt img gt   if the usemap attribute is present    lt input gt   if the type attribute is not in the hidden state    lt keygen gt    lt label gt    lt menu gt   if the type attribute is in the toolbar state    lt object gt   if the usemap attribute is present    lt select gt    lt textarea gt    lt video gt   if the controls attribute is present     If you are trying to have a button that links to somewhere  wrap that button inside a  lt form gt  tag as such   lt form style  quot display  inline quot  action  quot http   example com  quot  method  quot get quot  gt     lt button gt Visit Website lt  button gt   lt  form gt   However  if your  lt button gt  tag is styled using CSS and doesn t look like the system s widget    Do yourself a favor  create a new class for your  lt a gt  tag and style it the same way

User · Answer

If you re using Bootstrap 3  this works quite well   lt a href     class  btn btn-primary btn-lg active  role  button  gt Primary link lt  a gt   lt a href     class  btn btn-default btn-lg active  role  button  gt Link lt  a gt

[html] Can I nest a <button> element inside an <a> using HTML5?

Examples related to html