I know there are tons of questions about this topic but I can\'t find an authoritative source for the answer.
This is the official definition and th
http://www.w3.org/wiki/HTML/Elements/section is not the official definition of section
. section
is defined in the HTML5 specification, which currently is a Candidate Recommendation (which is a snapshot of the Editor’s Draft).
In the CR, section
is defined as:
The
section
element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
section
is a sectioning content element (together with article
, aside
and nav
). Those sectioning elements and the headings (h1
-h6
) create an outline.
The following three examples are semantically equivalent (same meaning, same outline):
My first day
…
Waking up
…
The big moment!
…
Going to bed
…
My first day
…
Waking up
…
The big moment!
…
Going to bed
…
My first day
…
Waking up
…
The big moment!
…
Going to bed
…
So you can use section
whenever (*) you use h1
-h6
. And you use section
when you need a separate entry in the outline but can’t (or don’t want to) use a heading.
Also note that header and footer always belong to its nearest ancestor sectioning content (or sectioning root, like body
, if there is no sectioning element) element. In other words: each section
/article
/aside
/nav
element can have its own header
/footer
.
article
, aside
and nav
are, so to say, more specific variants of the section
element.
two completly different usage cases
These two use-cases are not that different at all. In the "container" case, you could say that section
represents a chapter of the document, while in the "chapter" case section
represents a chapter of the article/content (which, ouf course, is part of the document).
In the same way, some headings are used to title web page parts (like "Navigation", "User menu", "Comments", etc.), and some headings are used to title content ("My first day", "My favorite books", etc.).