¿Puedo anidar un elemento <button> dentro de un <a> usando HTML5?

Estoy haciendo lo siguiente:

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>  

Esto funciona bien, pero recibo un error de validación HTML5 que dice "El elemento 'botón' no debe estar anidado dentro del elemento 'un botón'.

¿Alguien puede darme consejos sobre lo que debo hacer?

No , no es HTML5 válido según el documento de especificaciones HTML5 de W3C :

Modelo de contenido: transparente , pero no debe haber contenido interactivo descendiente de .

El elemento a puede estar envuelto alrededor de párrafos enteros, listas, tablas, etc., incluso secciones enteras, siempre que no haya contenido interactivo (por ejemplo, botones u otros enlaces).

En otras palabras, puede anidar cualquier elemento dentro de un <a>excepto los siguientes:

• <a>

• <audio>(si el atributo de controles está presente)

• <button>

• <details>

• <embed>

• <iframe>

• <img>(si el atributo usemap está presente)

• <input>(si el atributo type no está en estado oculto )

• <keygen>

• <label>

• <menu>(si el atributo type está en el estado de la barra de herramientas )

• <object>(si el atributo usemap está presente)

• <select>

• <textarea>

• <video>(si el atributo de controles está presente)

Si está intentando tener un botón que se vincule a algún lugar, envuelva ese botón dentro de una <form>etiqueta como tal:

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

Sin embargo, si su <button>etiqueta está diseñada con CSS y no se parece al widget del sistema ... Hágase un favor, cree una nueva clase para su <a>etiqueta y póngale el mismo estilo.

Si estás usando Bootstrap 3 , esto funciona bastante bien

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

No.

La siguiente solución se basa en JavaScript.

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

Si el botón es para ser colocado dentro de una existente <form>con method="post", a continuación, asegurar el botón tiene el atributo type="button"de lo contrario el botón someterá la operación POST. De esta manera, puede tener un <form>que contiene una mezcla de botones de operación GET y POST.

Acabo de saltar al mismo problema y lo resolví sustituyendo la etiqueta 'botón' por la etiqueta 'span'. En mi caso estoy usando bootstrap. Así es como esto luce:

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a> 

Sería realmente extraño si eso fuera válido, y esperaría que no sea válido. ¿Qué debería significar tener un elemento cliqueable dentro de otro elemento cliqueable? ¿Cuál es: un botón o un enlace?

Otra opción es usar el atributo onclick del botón:

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

Esto funciona, sin embargo, el usuario no verá el enlace que se muestra al pasar el mouse como si estuviera dentro del elemento.

En estos días, incluso si la especificación no lo permite, "parece" que todavía funciona para incrustar el botón dentro de una <a href...><button ...></a>etiqueta, FWIW ...

Puede agregar una clase al botón y colocar un script que lo redirija.

Lo hago de esta manera:

<button class='buttonClass'>button name</button>

<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

por qué no ... también puedes incrustar la imagen en el botón

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM> 

Explicación y solución de trabajo aquí: Cómo: div con onclick dentro de otro div con onclick javascript

ejecutando este script en su controlador de clic interno:

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

Es ilegal en HTML5 incrustar un elemento de botón dentro de un enlace.

Es mejor usar CSS en el estado predeterminado y: estados activos (presionados):

body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
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}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}

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

Pruebo sus soluciones de JavaScript pero, para el trabajo, necesito insertarlas e.preventDefault();en mi función de JavaScript.

<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
  <button onclick="my_trick_function('my_secondary_link.php')">
</a>


<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
    $('#id_primary_link').click(function(e) {
        e.preventDefault();
        window.location.replace(secondary_link);
    });
}   
</script>   

Use el atributo de formación dentro del botón

¡PD! Solo funciona si su botón type = "submit"

<button type="submit" formaction="www.youraddress.com">Submit</button>