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

【问题标题】：Is it semantically incorrect to put a <div> or <span> inside of a <button>?将 <div> 或 <span> 放在 <button> 内是否在语义上不正确？
【发布时间】：2021-07-16 21:28:15
【问题描述】：

我想执行以下操作，但它在语义上是否正确？

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

【问题讨论】：

为了澄清这一点，问题标题要求 div 或 span，示例只有 div。所以下面的答案说 div 不正确，但 span 是正确的。

标签： html

【解决方案1】：

当前的 HTML5 草案说它不正确。

http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element 表示<button> 必须仅包含短语内容。短语内容定义为包括<span>，但不包括<div>。

【讨论】：

链接正常，但报告 ng-click（角度事件）为错误。
在 'data-ng-click' 前添加 'data-' 以便它可以验证并仍然与 AngularJS 一起工作。

【解决方案2】：

不，它是无效的。你可以在 W3C 验证它。

http://validator.w3.org/#validate_by_input+with_options

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

<!DOCTYPE html>

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

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

【讨论】：

在此上下文中不允许元素 div 作为元素按钮的子元素。（抑制来自该子树的更多错误。）
Div 被认为是错误，span 被validator.w3.org接受

【解决方案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>

今天得到验证。能否在十年内生效是另一回事...

【讨论】：

【解决方案4】：

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

也就是说，出于与语义无关的原因，将 div 放置在按钮内是不正确的。 specification 谈到了按钮的内容模型：

短语内容，但不得有交互式内容后代。

…span 是对内容的表述，但 div 不是。

【讨论】：

【解决方案5】：

跨度似乎合法。

（截图来自https://validator.w3.org/）

【讨论】：

【解决方案6】：

按钮应该包含一个 div 或 span，如果你想将多个 div 或 span 放在一个按钮中，首先将每个内容放在一个 div 或 span 中并应用 style="Display:flex;"或 style="Display:-webkit-box;"。

【讨论】：

如果你能把它格式化好一点，它会更容易阅读。