Header In Semantic HTML5

I am designing a semantic mark-up of my HTML page. The page consists of a main content block and of a side bar. There are several independent blocks in the side bar like latest new

Solution 1:

As you are using a sectioning element (section in your case, but you might want to use aside), these sections already have an implicit outline entry.

You can provide an explicit entry by using a heading (h1-h6).

So yes, you should use a heading element (h1-h6) for specifying the heading of each block (→ section).

In addition, you may use a header element. But this is not required (it makes sense to use it if your header consists of more than just the heading).

So I’d go with:

<aside>
  <h1>News</h1>
  <!-- content -->
</aside>

<aside>
  <h1>Statistics</h1>
  <!-- content -->
</aside>

And for complex headers:

<aside>
  <header>
    <h1>News</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

<aside>
  <header>
    <h1>Statistics</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

Solution 2:

that use of a header is valid - that's how sections are meant to be used - see this definition for the use of sections https://stackoverflow.com/a/6941170/3529814

Solution 3:

It's completely valid, but if it's just a simple heading, I'd say an H* tag will be sufficient and semantically correct on it's own.

If there are several elements describing the section contents, such as a heading, a description and a date tag or something along that path, I would wrap them in a <header> tag.