Landmarks

Historically, landmark elements were divs with ARIA landmark roles. Nowadays, flow content elements have Sectioning content elements.

The Living Standard has a Sections page which bundles body, article, section, nav, aside, h1…h6, hgroup, header, footer and address into this group. All these have their initial display value set to block.

For some reason not included here, but in Grouping content are main, search, blockquote…

Some elements in the spec are not recognised by lighthouse or tidy. Lighthouse doesn’t accept <menu> and tidy complains Error: <search> is not recognized! and discards it. Also Google insists on <div class="gcse-search"></div>. Replacing div with search broke the code.

body

In conforming documents, there is only one body element.

header

A header element is intended to usually contain a heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

Other than header or footer, it can contain any flow content.

hgroup

The element may be used to group an h1–h6 element with one or more p elements containing content representing a subheading, alternative title, or tagline.

nav

search

main

The be hierarchically correct it’s best to make main a direct descendent of body.

section

Each section should have a heading.

Landmark elements is the term Google lighthouse uses for what Mozilla terms Content categories.

ARIA Landmarks Example

I find these very handy to neaten up both my HTML templates and CSS, prefering them to lots of class names. However, there are various rules about which ones can be nested in which, which must have headings, or can only appear once in a page.

Whereas only article, aside, footer, header, nav, and section are considered sectioning elements, I’ve included main, div, and many more since they help make the HTML more human readable.

The following HTML elements default to display: block, so may need to be overwritten to display: flex

1. address
2. article
3. aside
4. blockquote
5. body
6. dd
7. details
8. div
9. dl
10. dt
11. fieldset
12. figcaption
13. figure
14. footer
15. form
16. h1…h6
17. header
18. hr
19. html
20. iframe
21. legend
22. menu
23. nav
24. ol
25. p
26. pre
27. section
28. summary
29. ul

TLDR: Strictly speacking, a sectioning element is one whose default CSS is simply display: block; which for responsive design needs to be overwritten to display: flex;.

address {
  display: block;
  font-style: italic;
}

article {
  display: block;
}

aside {
  display: block;
}

body {
  display: block;
  margin: 8px;
}

blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

div {
  display: block;
}

footer {
  display: block;
}

form {
  display: block;
  margin-top: 0em;
}

header {
  display: block;
}

html {
  display: block;
}

main {
}

nav {
  display: block;
}

output {
  display: inline;
}

section {
  display: block;
}

summary {
  display: block;
}

HTML5 landmark elements are used to improve navigation

[The page contains a heading, skip link, or landmark region]

Visual order on the page follows DOM order

Containers

container-type