Empty heading warning on HTML5 validation

Question

I try to validate my HTML code and I have found this warning: Empty heading. See here

Obviously the heading is not empty. The content of the <h3></h3> is generated, in WordPress, by the_title() function. So, I don't understand why is this happen.. Somebody can explain me what is the problem? Thanks!

Answer 1

First off, the HTML is valid. It passes the W3C check, so you don't need to worry too much.

With that said, your code is misusing HTML syntax. The "empty heading" warning means that you have a heading tag (<hN>) that doesn't have any content associated with it. Heading tags are intended to mean "this is what this bit of content is about". As the HTML5 spec says:

The h1 through h6 elements are headings for the sections with which they are associated.

You are instead using the h3 tag as a formatting instruction. It has no content associated; the words are not actually the header for any content. This is misusing the semantics of the tag.

Does this matter? Probably not, though software which relies on the semantics of HTML rather than the appearance (e.g. screenreaders) might find it tricky. I'm not sure about how Wordpress works -- it might be very difficult to fix anyway.