Quote Originally Posted by mmj View Post
A section is like a type of div which also has a specific meaning - it designates a section in the outline of a document. Any content and headers within one section is deemed to be part of a related topic within the document, and its relationship (before, after, within, containing) with other sections can be deemed to represent the document's overall structure in terms of chapters (or sections), subsections, etc as in a book or report. The nesting level of a section corresponds to the nesting level of a document outline, ie the fourth section element inside the third top-level section element could be section 3.4. This could correspond to chapter 3, subheading 4.

Divs can be nested as deep as you like and it doesn't imply anything about the outline structure of the document, nor that the content inside a div is topically related. They are generic block level containers that can be used for any purpose - their only semantic purpose is to represent a block level element.

You can use CSS or script to make sections and divs do the same things. The difference is only the semantic meaning. The meaning of sections could be used by a browser to give an outline summary of a document. The information about structure could also help search engines and other indexing services.

A section element cannot be used for a navigation menu or a footer, because those parts of a page do not represent elements of a document's structure such as chapters and subheadings. For example, when generating an outline of the document a footer should not be regarded as a new chapter or subheading within a chapter of a document.
Yep that's correct, except that <nav> is actually a sectioning element just like <section> in HTML5 (so it affects the document outline).

The following elements are sectioning elements:


The following elements are "sectioning roots":