Header in semantic HTML5

Question

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 news, links, statistics e.t.c. Each block has a header with a block name: "Statistics", "Links" e.t.c.

The question. Is it a semanticly correct usage of the tag header if I put a block name in the header tag like <section id="News"><header>News</header><ul>...</ul></section>.

Is it a semanticly correct to put the name of the section in <h*> tag instead?

What is the difference between the options and why one should use one of the options?

It's not invalid but it does break the document outline that these new elements are meant to support. See http://www.w3.org/html/wg/drafts/html/master/sections.html#outlines — Anthony, Apr 13 '14 at 20:27

score 3 · Accepted Answer · edited May 23 '17 at 10:33

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>

score 0 · Answer 2 · edited May 23 '17 at 12:10

0

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

edited May 23 '17 at 12:10

Community

1
1

answered Apr 13 '14 at 20:20

DarkNinja955

197
8

score 0 · Answer 3 · answered Apr 13 '14 at 20:22

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.

Header in semantic HTML5

3 Answers3

Linked