将 <button> 放在 <h2> 中在语义上是否有效？答案

【问题标题】：Is it semantically valid to put a <button> inside a <h2>?将 <button> 放在 <h2> 中在语义上是否有效？
【发布时间】：2014-06-30 09:47:55
【问题描述】：

我有一个标题元素，点击时需要触发一些 JavaScript。我知道我应该只在页面实际发生变化时使用<a> 标签，并且 <button>s 是 JS 函数的首选，但由于某种原因，这样做感觉不对

<h2><button onclick="myFunction();">My Title</button></h2>

我无法解释为什么这在语义上感觉不正确。只有我吗？

【问题讨论】：

见W3C Validator
按钮的实际文本是什么？单独作为标题是否合适？
是的，按钮的文本是点击时显示的内容的标题。
按钮不适用于 js 函数，它用于页面上的 ajax。不管你感觉如何，它是正确的使用......关于你的感受的部分真的让我觉得这甚至不是一个真正的问题。

标签： html semantic-markup html-heading htmlbutton

【解决方案1】：

按照W3C Validator的说法，这样做是没有问题的。

您可以尝试验证此代码：

<!DOCTYPE html>
<html>
<head>
   <title>I AM YOUR DOCUMENT TITLE REPLACE ME</title>
</head>
<body>

<h2><button onclick="myFunction();">My Title</button></h2>

</body>
</html>

不过，我建议避免使用内联样式。

【讨论】：

他不是在问它是否技术上有效，他是在问语义。
我认为@sanjay 想知道它是否在某种程度上被认为是有意义的，而不是它是否是有效代码。很高兴知道这是有效代码，但并不是他问题的真正答案。
@WesleyMurch 那么这个问题主要是基于意见的，因为没有客观的方法来测试语义有效性。
这里唯一相关的是有效性。否则和“为什么要在 DIV 中放一个 BUTTON？”是一样的
@user2864740 使用<div> 而不是<li> 标记列表也是有效的，但它在语义上不正确。

【解决方案2】：

按钮的实际文本是什么？单独作为标题是否合适？

按钮的文本是点击时显示的内容的标题

那我觉得你状态不错。不过，我会提出一个小建议，可能会让您感觉更好：

<h2><a href="#content">My Heading</a></h2>
<element id="content"> [your content] </element>

然后在外部 javascript 文件中附加一个 onclick 处理程序。如果您稍后删除它，该链接仍然有效。

【讨论】：