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.