<button> 是否应该包含嵌套的 DOM 元素？

Question

我没有意识到它是否不好，根据关于 HTML 语义书写的 W3C 规则 - 我们应该如何用后代元素编写 button 元素？

像这样：

<button>
 <div>
   <span>'hi'</span>
 </div>
</button>

或只有这个：

<button>'hi'</button>

Answer 1

基本上规范不允许这样做。

它可能适合您，但这不是最佳做法。

如您所见，here 按钮不能是交互式内容后代。

您还可以在 here

中验证您的 html

Answer 2

我在 W3C Validator 中测试了您的代码，显示的错误是 Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

Answer 3

<button> 中的嵌套标签是 not valid and returns the following when tested:

Element div not allowed as child of element button in this context.

非嵌套标签是正确的做法。

喜欢的可以自己看看。我用下面的HTML来测试：

<!DOCTYPE html>
<html lang="en"> 
<head> 
<title>Button test HTML</title> 
</head>
<body>
<button>
<div>
   <span>'not valid'</span>
 </div>
</button>
<button>Valid</button>
</body>
</html>

Answer 4

button element may contain elements that are phrasing content without also being interactive content。换句话说：在段落内级别使用的元素（有时称为 内联元素 ），并且不允许用户交互。

例如，这意味着它可能包含 span 个元素，但不包含 div 个元素。所以这是有效的：

<button>
  <span>'hi'</span>
</button>

<button> 是否应该包含嵌套的 DOM 元素？

Should <button> contain nested DOM element or not?

html

semantic-markup

w3c-validation

htmlbutton