Can someone explain why a header-element containing a single heading in an article is bad?

Question

This article "Avoiding common HTML5 mistakes" on HTML5Doctor says:

If your element only contains a single heading element, leave out the <header>.

According to the article, this is bad practice:

<article>
    <header>  
        <h1>Heading</h1>
    </header>

    <p>Content …</p>
</article>

The w3c says:

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

Now I'm confused. The specs clearly states, that it usually holds a single heading. It also can hold other content. But none is mandatory.

So it seems to me, that the code above is absolutely valid and semantically correct.

I imagine a situation where the content of the <header>-element is coming from a CMS and it could result in a full blown header or just a single heading. In this case you would have to check for the content of the element all the time and add the wrapper accordingly. Seems not worth the effort, right?

Maybe I'm overloooking something and somebody could reason me, why it is bad practice.

Answer 1

Important: The article you've referenced is old and out of date. hgroup, for example, was dropped from the HTML5 specification over a year ago. You should ideally try to find more updated resources.

---

That said, as you only have one element contained within it, your header wrapper here isn't really needed at all. You can drop it altogether and apply your styling directly onto your h1 element to achieve the same effect:

<article>
    <h1>Heading</h1>
    <p>Content …</p>
</article>