将 <button> 放在 <h2> 中在语义上是不是有效？
Posted
技术标签:
【中文标题】将 <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。不管你感觉如何，它是正确的使用......关于你的感受的部分真的让我觉得这甚至不是一个真正的问题。 【参考方案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 处理程序。如果您稍后删除它，该链接仍然有效。
【讨论】：
以上是关于将 <button> 放在 <h2> 中在语义上是不是有效？的主要内容，如果未能解决你的问题，请参考以下文章