将<div>或<span>放在<button>中是否在语义上不正确？

Question

我想做以下几点,但它在语义上是否正确？

<button>
  <div></div>
  <div></div>
</button>

Answer 1

目前的HTML5草案说它不正确.

http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element说a <button>必须只包含Phrasing内容.短语内容被定义为包括<span>但不包括<div>.

Answer 2

不,它无效.您可以在W3C验证它.

将其粘贴到直接输入中,然后进行验证.

<!DOCTYPE html>

<button>
  <div></div>
  <div></div>
</button>

设置UTF8编码并在W3C测试时选择HTML5.

Answer 3

我确定这是异端，但是如果您想验证您可以始终<span>在按钮内使用元素并将其样式设置为<div>：

button span {

  display: block;

}

<button>
  <span>I'm a div</span>
  <span>I'm a div</span>
  <span>I'm a div</span>
</button>

今天对此进行了验证。它是否会在十年内验证是另一个故事。

Answer 4

div 和 span 元素没有任何语义。它们是通用的块和内联元素。当您使用它们时，您需要问自己的关于语义的唯一问题是是否有一个元素对此内容具有更好的语义？。

\n\n

也就是说，由于与语义无关的原因，将 div 放置在按钮内是不正确的。该规范描述了按钮的内容模型：

\n\n

\n
措辞内容，但不得有互动内容后代。
\n

\n\n

\xe2\x80\xa6 span 是短语内容，但 div 不是。

\n