Features

Semantic

Ambient makes it easy for you to scaffold HTML5.

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 div.

Holy Grail HTML5 example

See the Pen Idea for flexbox HTML5 scaffolding & layout attributes by I only see spots (@ionlyseespots) on CodePen.

Code 

<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>

Explicit

All content lying inside the body element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the body element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are:

Scaffolding ARIA Role Description
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.

Implicit

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.

Scaffolding Description
<h1> <h2> <h3> <h4> <h5> <h6> A heading element briefly describes the topic of the section it introduces.

Layout

Avoids presentational CSS classes in the markup.

Dynamic

Provides layout for both portrait & landscape.