Frontier Software


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.

h t m l b o d y a h m f s e a o i a i o d d n t e e h n s a s e r g a e s e r r v c i c o t d t u h h u i h a h a e i h a h a p 1 2 l o 3 r 3 r o 3 r 3 r n t t n t t i i i i l l c h p u c c c i i l 4 l l l l e e e e


In conforming documents, there is only one body element.


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.


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.



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


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