Posso nidificare un elemento <button> all'interno di un <a> usando HTML5?

Sto facendo quanto segue:

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

Funziona bene, ma viene visualizzato un errore di convalida HTML5 che dice "L'elemento" pulsante "non deve essere nidificato nell'elemento" un pulsante ".

Qualcuno può darmi consigli su cosa dovrei fare?

No , non è un HTML5 valido secondo il documento sulle specifiche HTML5 del W3C :

Modello di contenuto: trasparente , ma non deve esserci discendente di contenuto interattivo .

L'elemento a può essere racchiuso in interi paragrafi, elenchi, tabelle e così via, anche in intere sezioni, purché non vi sia contenuto interattivo (ad es. Pulsanti o altri collegamenti).

In altre parole, puoi annidare qualsiasi elemento all'interno di un <a>tranne quanto segue:

• <a>

• <audio>(se l' attributo controlli è presente)

• <button>

• <details>

• <embed>

• <iframe>

• <img>(se l' attributo usemap è presente)

• <input>(se l' attributo type non è nello stato nascosto )

• <keygen>

• <label>

• <menu>(se l' attributo type si trova nello stato della barra degli strumenti )

• <object>(se l' attributo usemap è presente)

• <select>

• <textarea>

• <video>(se l' attributo controlli è presente)

Se stai cercando di avere un pulsante che si collega a un punto, avvolgi quel pulsante all'interno di un <form>tag come tale:

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

Tuttavia, se il tuo <button>tag è in stile usando CSS e non assomiglia al widget del sistema ... Fatti un favore, crea una nuova classe per il tuo <a>tag e lo stile allo stesso modo.

Se stai usando Bootstrap 3 , funziona abbastanza bene

<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 seguente soluzione si basa su JavaScript.

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

Se il pulsante deve essere inserito in un esistente <form>con method="post", assicurarsi che il pulsante abbia l'attributo, type="button"altrimenti il ​​pulsante invierà l'operazione POST. In questo modo è possibile avere un file <form>contenente una combinazione di pulsanti operativi GET e POST.

Sono appena passato allo stesso problema e l'ho risolto sostituendo il tag "button" al tag "span". Nel mio caso sto usando bootstrap. Ecco come appare:

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

Sarebbe davvero strano se fosse valido e mi aspetterei che non fosse valido. Cosa dovrebbe significare avere un elemento cliccabile all'interno di un altro elemento cliccabile? Che cos'è - un pulsante o un collegamento?

Un'altra opzione è utilizzare l'attributo onclick del pulsante:

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

Questo funziona, tuttavia, l'utente non vedrà il link visualizzato al passaggio del mouse come farebbe se fosse all'interno dell'elemento.

In questi giorni, anche se le specifiche non lo consentono, "sembra" funzionare ancora per incorporare il pulsante all'interno di un <a href...><button ...></a>tag, FWIW ...

È possibile aggiungere una classe al pulsante e inserire alcuni script reindirizzandolo.

Lo faccio in questo modo:

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

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

perché no .. puoi anche incorporare l'immagine sul pulsante

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

Spiegazione e soluzione operativa qui: Howto: div con onclick all'interno di un altro div con onclick javascript

eseguendo questo script nel gestore dei clic interno:

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

È illegale in HTML5 incorporare un elemento pulsante all'interno di un collegamento.

Meglio usare CSS sui valori predefiniti e: active (premuto):

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>

Provo le tue soluzioni javascript ma, per lavoro, devo inserire il e.preventDefault();nella mia funzione 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>   

Usa l'attributo formaction all'interno del pulsante

PS! Funziona solo se il tuo pulsante type = "submit"

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