HTML5 is a format for a text file, which makes pretty stuff happen to the text when viewed in an HTML5 browser. For a complete explanation, see the full picture.

In this article I want to talk about the stuff that divides and sections HTML5 content. I section my ideas in HTML5 to outline and organize them. Some of these elements are not visibly distinct from one another by default, but form document semantics which can be styled to enhance meaning. At the least, these elements indirectly enhance the HTML5 document experience by freedom of content organization. Except where noted, I can have many section elements nested within one another, all of which are nested within the body or template elements.

Root sectioning elements

Root sectioning elements are at the root of a document outline. A logical outline of a root sectioning element forms an isolated outline that does not form a part of any ancestor element's outline.

blockquote
fieldset
figure
td
Each instance is a root sectioning element which means that the outline is isolated from the surrounding document.
body
I must have exactly one (per document). Collects all content, semantic elements and display elements together after the head. I'd like to think of the body as containing all text and layout or structure, and other elements such as references to media that will be presented with the text in the browser.

Sectioning elements

Sectioning elements form the structure of the outline from the sectioning root.

article
Its contents represent a complete, self-contained composition that is (in principle) independently distributable. Its own thing. A comment posted to an article is not part of the article, so itself is another article.
aside
Its contents represent a section of tangentially related content that (in principle) could be considered separate from that content. For example, a sidebar.
blockquote
Its contents represent a quotation. A root sectioning element.
nav
Its contents represent a section with navigation links.
section
Its content represents a generic section of a document or application. Part of something else.

Section enhancement elements

Section enhancement elements attach to the nearest ancestor sectioning element or root sectioning element.

address
Its contents represent contact information for the nearest containing article or else the whole document. Do not mark any other information other than contact information of the author or editor with this element.
h1
h2
h3
h4
h5
h6
Its contents represent a section heading for the nearest containing sectioning element. I like the h# to match the depth of nesting of sectioning elements within the body element. An h1 element for the document heading, An h2 for each top level section heading, and so on.
header
Its contents represent a section header for the nearest containing sectioning element. Typically includes a h1 h2 h3 h4 h5 h6 heading. Attaches surrounding text or elements (logos, navigation, etc.) which would be appropriately considered part of the overall section heading.
footer
Its contents represent a section footer for the nearest containing sectioning element. Attaches surrounding text or elements (logos, navigation, etc.) which would be appropriately considered part of the overall section footer.

Grouping elements

Grouping elements divide portions of the document into blocks, apart from sectioning and outlining (without effect on sections and outlines).

div
Its contents represent a generic grouping element. Last resort for when no other sectioning or grouping element is suitable.
figure
Marks its contents as self-contained and typically referenced by its figcaption text. Can be as simple as a complete sentence. A root sectioning element.
figcaption
I can have one per parent element (figure) as the first or last child. Its content represents a caption or legend for the parent element.
main
Its contents represent the main content of the body element of a document or application.
p
Its contents represent a paragraph and cannot contain any other
  • paragraph (p),
  • table (table),
  • list (dl, ol and ul),
  • section element (article, aside, blockquote, nav and section)
  • section enhancement (address, footer, h1, h2, h3, h4, h5, h6 and header),
  • grouping element (div, main, p and pre),
  • form container (fieldset and form), nor
  • thematic break (hr).
pre
Its contents represent preformatted text, where spaces (tabs, new lines) are preserved as formatting elements. The first new line is ignored. The structure of the element follows typographic conventions. Wrapping a code element within a pre element is a way to directly copy code (non-xml) with minimal escaping.
summary
details
Not part of the HTML5 standard.

Breaking elements

Breaking elements add line breaks or visible thematic breaks beyond sectioning, grouping, and normal word wrapping within elements.

br
May have many per parent. A void element. Marks the position of a line break.
hr
May have many per parent. A void element. Marks the position of a thematic break.
wbr
May have many per parent. A void element. Marks the position of an acceptable break within a word or within another normally unbroken section of text.

These elements may have Global Attributes and Event Attributes.

YES!! I have survived this exposé on how to section HTML5 documents, and I hope you have too.