buttonの中にdivはOKですか？

Question

buttonの中にdivはOKですか？

「入れ子ルールまとめ」など見ても「buttonの中に何が入れられるのか？」が書いておらず、わからないのですが、

・ブロック要素もOKなのでdivもOK
・ブロック要素は全部ダメなのでdivもダメ
・インライン要素はOKなのでspanはOK

などの説明はどこかにないでしょうか？

Answer 1

HTML5では「記述コンテンツ、但し対話型コンテンツがあってはならない」となっているのでdivはNGです。

【<button>: ボタン要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button

許可されている内容 記述コンテンツ、但し対話型コンテンツがあってはならない

【コンテンツカテゴリー - 開発者ガイド | MDN】
https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories$history

このカテゴリーに属する要素: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> および通常の文字列です

Comments

[KOMANETI]

なるほど。divでなくspanにしておきます。詳細なリンクをありがとうございました。

Answer 2

• button要素｜(X)HTML辞典

によると、「a要素とiframe要素、フォーム関連要素を除く」ものとなっています

Comments

[KOMANETI]

ありがとうございます。参考にさせて頂きます。