CODEWITHSUNDEEP
html
suryanaga
suryanaga

Reputation: 4002

Is it semantically valid to put a <button> inside a <h2>?

I have a header element which needs to fire off some JavaScript when clicked. I know I should only use <a> tags when the page is actually changing, and that <button>s are preferred for JS functions, but for some reason it just feels wrong to do 

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

I can't put my finger on why that doesn't feel semantically correct. Is it just me?

Upvotes: 24

Views: 37753

Answers (4)

Ciro Santilli OurBigBook.com
Ciro Santilli OurBigBook.com

Reputation: 382622

HTML5 standard quote that says you can

https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements 4.3.6 "The h1, h2, h3, h4, h5, and h6 elements" says that those elements can only have phrasing content ("inliny things" like bold or italics or links):

Content model: Phrasing content.

And https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element says that button is phrasing content:

Categories: Flow content. Phrasing content. [yada]

So you can nest them.

Upvotes: 7

PenSky
PenSky

Reputation: 21

Yes, but not vise vera. Element h2 not allowed as child of element button.

Upvotes: 1

No Results Found
No Results Found

Reputation: 102735

What is the actual text for your button? Would it be appropriate as a heading on it's own?

the text for the button is the title of the content that's being revealed onclick

Then I think you're in good shape. I will however make a small suggestion that might make you feel better:

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

Then attach an onclick handler in an external javascript file. If you remove it later the link will still be valid.

Upvotes: 9

Oriol
Oriol

Reputation: 288010

According to W3C Validator, there's no problem in doing that.

You can try validating this code:

<!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>

However, I suggest avoiding inline styles.

Upvotes: 24

Related Questions