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

html semantic-markup html-heading htmlbutton
sanjaypoyzer picture sanjaypoyzer · May 12, 2014 · Viewed 17.7k times · Source

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?

Answer

Oriol picture Oriol · May 12, 2014

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.

Related questions

<code> vs <pre> vs <samp> for inline and block code snippets

My site is going to have some inline code ("when using the foo() function...") and some block snippets. These tend to be XML, and have very long lines which I prefer the browser to wrap (i.e., I don't want …

Read More
Should I use <i> tag for icons instead of <span>?

Facebook's HTML and Twitter Bootstrap HTML (before v3) both use the <i> tag to display icons. However, from the HTML5 spec: The I element represents a span of text in an alternate voice or mood, or otherwise offset …

Read More
CSS/HTML: What is the correct way to make text italic?

What is the correct way to make text italic? I have seen the following four approaches: <i>Italic Text</i> <em>Italic Text</em> <span class="italic">Italic Text</…

Read More