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?
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.
<div> instead of <li> is valid as well, however it is not semantically correct.
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.
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.
Yes, but not vise vera. Element h2 not allowed as child of element button.
