Is an HTML5 tag unnecessary if there is only a single tag inside it?

Question

I've searched and have not come up with any useful answers, so here goes:

Is an HTML5 <header> tag unnecessary if there is only a single <hx> tag inside it? For instance, I have the following HTML5 markup:

<article>

   <header>
      <h1>Heading Title</h1>
   </header>

   ...

</article>

From an HTML5 semantics point of view, when there is only one <hx> tag inside the <header> and nothing else, is the <header> tag unnecessary/redundant, and should I just do this instead:

<article>

   <h1>Heading Title</h1>

   ...

</article>

Answer 1

Yes, it’s unnecessary in this specific case. Which means, you may use a header (it wouldn’t be wrong) but it’s also not required.

header (together with footer and address) is used to markup a section’s content that is not considered to be the main content of that section. A section can be a sectioning root (like body) or a sectioning content (like article) element.

So when your header would contain more than a heading element (for example, a subtitle), you should use a header element, because otherwise it wouldn’t be clear if this content is part of the header or the main content. But in case of a single heading element, it’s clear by definition: the first heading element in a section is the heading for this section.

Answer 2

From the first Note section on the W3C's header spec which ajp15243 mentioned above, emphasis mine:

A header element is intended to usually contain the section's heading (an h1–h6 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.

If all you have is a single (as per your example) <h1></h1>, the <header> tag is not required for your document to be properly-formed and semantically correct.

You might find that having the <header> element as a wrapper aids you in styling the h1 later with CSS, but as far as the HTML alone in this case, you're semantically fine either with or without <header>.