Reviewing landmarks

Review the different HTML landmarks.

<header>

A top level <header> element generates a banner landmark:

Site name

A nested <header> element does not generate a banner landmark:

News article header

<footer>

A top level <footer> element generates a contentinfo landmark:

A nested <footer> element does not generate a contentinfo landmark:

<main>

A <main> element generates a main landmark:

Main region

<nav>

A <nav> element generates a navigation landmark:

The <nav> element can be given a label via aria-label:

Or via aria-labelledby:

<aside>

An <aside> element generates a complementary landmark:

The <aside> element can be given a label via aria-label:

Or via aria-labelledby:

<section>

An <section> element generates a section or region landmark, but this is not announced by most assistive technologies:

Heading for section region

<search>

The search element is used to identify a set of form controls related to performing a search or filtering operation.