问题
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?
回答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>
回答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
回答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.
来源：https://stackoverflow.com/questions/23047891/header-in-semantic-html5