Build the intent of your content
Ambient makes it easy for you to scaffold HTML5. Build your content in the document outline.
Do use HTML5 sectioning elements to build the intent of your content.
Do NOT use HTML5 sectioning elements as a replacement for content better suited to a
See the Pen Idea for flexbox HTML5 scaffolding & layout attributes by I only see spots (@ionlyseespots) on CodePen.
<body> <header role="banner"> <h1> Header </h1> </header> <aside role="complementary"> <h1> Aside </h1> </aside> <main role="main"> <h1> Hello, world! </h1> </main> <aside role="complementary"> <h1> Aside </h1> </aside> <footer role="contentinfo"> <h1> Footer </h1> </footer> </body>
All content lying inside the
bodyelement is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the
bodyelement, section limits are defined either explicitly or implicitly. Explicitly-defined sections are:
|body||none||Represents the content of an HTML document.|
|header||banner||Represents a group of introductory or navigational aids.|
|nav||navigation||Represents a section of a page that links to other pages or to parts within the page.|
|main||main||Represents the main content of the body of a document or application.|
|article||article||Represents a self-contained composition in a document, page, application, or site.|
|section||region||Represents a generic section of a document.|
|aside||complementary||Represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content.|
|footer||contentinfo||Represents a footer for its nearest sectioning content or sectioning root element.|
The HTML Headings Elements (h1 to h6) defines a new, implicit, section when they aren't the first heading of their parent, explicit, sections. The way this implicit section is positioned in the outline is defined by its relative rank with the previous heading in their parent section. If it is of a lower rank than the previous heading, it opens a implicit sub-section of the section.
||A heading element briefly describes the topic of the section it introduces.|