Metadata provide information about the document to agents.

HTML has 33 metadata:

There must be some metadate for certain purposes:

• Language Metadata for, example, synthesis tools to determine what pronunciations to use.

• Title Metadata for identification of documents in agents.

There should be some metadata for certain purposes:

• Viewport Metadata for responsive web design

• Base Design System for a readable document by default

• Charset Metadata for appropriate display of characters

Windows reveal content to users.

HTML has 2 Windows:

There must be one Primary Window; there can be zero or more Modal Windows.

Mixes are a set of Blocks and Mixes.

HTML has 33 Mixes:

All but one Main Landmark must have a hidden attribute. Each of the other landmarks must have an ARIA label when used more than once.

Landmarks should be siblings as they partitions the window — not one another.

Sections, Parts, Description Layer, and Details Card are private mixes as certain blocks or mixes imply them.

Only a sub-section that is independent (Article or General Section) should imply parts or dependent sections. If the root section were to imply, it'll invalidate its semantics as the root.

A Fieldset Card should only be available within a Form Card, Search Card, Form Region, or Search Region as it creates a thematic grouping of their content.

Each Layer eventually contain cards:

• List Layers contain Item Cards.

• Description Layer contains Description Items. Description Items contain one or more Description Titles, and one or more Description Cards.

• Table Layers contain optional Table-caption cards, zero or more Table-column Reference, optional Table Head, zero or more Table Body, and optional Table Foot. Table-column Reference contains Table-column Items if there's no span attribute. Table Head, Table Body, and Table Foot contains Table Rows. Table Rows contain Table Titles if in Table Head, otherwise contain Table Data Cards.

Blocks build Frames with Medias, Forms, Breaks, and Phrases.

HTML has 14 Block components:

By the open-close principle, a primary heading (L* Heading) should have a hgroup parent element in readiness for any secondary headings.

Heading Blocks should have explicit Sections. Explicit sections, unlike implied sections, can cover content that precedes the heading group or those that follows a sub section.

Since there must be a title for a document, there should be a L1 Heading for the document. The former targets agents, the later targets users.

There should only be one L1 Heading per document. Multiple invalidate the semantics as a root heading — there can't be 2 roots.

Root heading should be in the Main Landmark — the primary landmark. Also, it should use a Primary Section; specifically, a General Section as the root section can't be independent of the document.

Main content should be within the root section. Sections make document; anything outside of the root section in the Main Landmark is literarily outside of the document.

There should be no heading block in a secondary landmark. Heading Blocks create Sections and there should not be sections outside of the root section.

A sub heading should have its section as a child of its parent section; you can't section a non-sectioning element. Also, it must be next in line to avoid missing section.

Like Description Titles, and Column Titles; Sections and other titles should bound their content with a div element for consistency.

There should be no implied paragraphs. Implied Paragraphs allows transparent elements to cross them, making them open to misinterpretations.

Phrases build Blocks with a set of Media, Forms, and Breaks.

HTML has 35 phrases:

Button Phrases must contain non-interactive Forms, Media, and Breaks.

A span element should wrap text beside a non-breaking content to avoid anonymous content.

Media present information in Blocks.

HTML has 9 Media:

Math Text and Vector Images contain elements defined in their namespaces.

Audio and Video Media must contain Sources if no src attribute, then zero or more Tracks. Either media must not contain a media.

General Media and Canvas Image may contain content as fallback. But, Canvas Image must not contain these interactive elements: Details Title; Web Document; Audio and Video Media without controls attribute; Forms except Buttons, Checkbox Forms, Radio Forms and Select Forms with a multiple attribute or a display size greater than one.

Forms accept information in Blocks.

HTML has 21 Forms:

Selection Forms will contain zero or more of Options, Option Groups and Separators. Options contain nothing if there's both label and value attribute; otherwise, text. Option Groups contain zero or more Options.

Textarea Forms contain General Text as the default value.