0

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.

lampshade
  • 2,470
  • 3
  • 36
  • 74

1 Answers1

0

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>
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • Yeah I noticed that the article is very old and some HTML things in it are not valid anymore. But thanks for including the note for other visitors. To the actual issue: Doesn't the `header`-element add any semantically meaning in a case like that? Maybe at least for screen readers or search engines? You also say "… [ìt] isn't really needed […]*" which implies, that it is not wrong either, right? – lampshade Aug 19 '14 at 10:34
  • @lampshade Well the `h1` to `h6` elements specifically *"represent headings for their sections"* (from the latest HTML5 Editor's Draft). The `header` element *"represents introductory content"*. In my mind there is no need to wrap a lone heading within a `header` element, as its intended meaning remains the same. – James Donnelly Aug 19 '14 at 10:37
  • **Whoop**. You're right. That settles it as it makes the semantics very clear. – lampshade Aug 19 '14 at 10:39