[解決済み] Can I nest a <button> element inside an <a> using HTML5?

Question

I am doing the following:

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

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?

How to solved?

No , it isn't valid HTML5 according to the HTML5 Spec Document from W3C :

Content model: Transparent , but there must be no インタラクティブコンテンツ の子孫になります。

a 要素は、ボタンやリンクなどのインタラクティブなコンテンツがない限り、段落、リスト、テーブルなど全体、あるいはセクション全体を囲むことができます。

言い換えれば、任意の要素を <a> ただし、以下を除く。

• <a>

• <audio> (もし を制御します。 属性が存在する場合）

• <button>

• <details>

• <embed>

• <iframe>

• <img> (もし ユースマップ 属性が存在する場合）

• <input> (もし タイプ 属性が 隠された の状態)

• <keygen>

• <label>

• <menu> (もし タイプ 属性が ツールバー の状態)

• <object> (もし ユースマップ 属性が存在する場合）

• <select>

• <textarea>

• <video> (もし を制御します。 属性が存在する場合）

どこかにリンクするボタンを設置する場合、そのボタンを <form> タグのように

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

しかし、もし <button> タグがCSSでスタイルされ、システムのウィジェットのように見えない...。自分の好きなように <a> タグを作成し、同じようにスタイリングしてください。