web-dev-qa-db-ja.com

要素aは、ボタン要素の子孫として表示してはなりません。

助けてください、html5テンプレートの検証中に http://validator.w3.org/ 経由でエラーが発生します。 「要素aはボタン要素の子孫として表示されてはならない」というメッセージが表示されます。理解できません。誰かが私がこれを解決するのを手伝ってもらえますか？

これが私のコードです---

<div class="post-response btn-group btn-group-lg">
   <a href="#"><button type="button" class="btn btn-default"><i class="fa fa-comment"> 5  Comments</i></button></a>
   <a href="#"><button type="button" class="btn btn-default"><i class="fa fa-heart"> 5 Likes</i></button></a>
</div>
html5anchorw3c-validation
6
user44690

HTML5仕様のドキュメントによると、エラーメッセージはすでにあなたの疑問に答えています

以下を除いて、<a>内の任意の要素をネストできます。

<a>

audio>（controls属性が存在する場合）

<button>

<details>

<embed>

<iframe>

<img>（usemap属性が存在する場合）

<input>（type属性が非表示状態でない場合）

<keygen>

<label>

<menu>（type属性がツールバー状態の場合）

<object>（usemap属性が存在する場合）

<select>

<textarea>

<video>（controls属性が存在する場合）

したがって、Button要素内にaを追加する代わりに、いくつかのcssを使用してボタンを設計する必要があります（または多くのメソッドがあります）。

8
Shekhar Pankaj

W3Cバリデーターからの通常のエラーは次のとおりです。

要素ボタンは、要素の子孫として表示されてはなりません

アンカーの子孫であるボタンがあるので、これはあなたの質問にとってより理にかなっています。

通常、アンカータグのスタイルを設定するか、フォーム要素内にボタンを配置することで、問題を解決できます。

<form style="display: inline" action="http://www.example.com/" method="get">
  <button>Some Call to Action</button>
</form>

しかし、あなたの場合、HTMLを使用してどこにもリンクしていないため、アンカーは必要ないと思います（JavaScriptを使用してイベントを添付する場合は、アンカーではなくボタンにそれらのイベントを添付するだけで済みます。

5
Fenton