Landmark elements
landmarks, sectioning elements, semantic html elements, aria landmarksDefinition
The HTML elements that map to ARIA landmark roles and give a page its navigable regions — <main> (main), <nav> (navigation), <aside> (complementary), <header> (banner) and <footer> (contentinfo) at the top level, <form> (form) and <section> with a name (region) — so that a screen-reader user can jump between the parts of a page the way a sighted one scans them
The reason a page built from <div>s is accessible only by accident: landmarks are the table of contents assistive technology reads, and each element here writes one entry in it for free. The rules are few — exactly one <main>; <header> and <footer> are landmarks only when they are not inside an <article> or <section>; a <section> becomes a region only with an accessible name; every <nav> past the first wants an aria-label so they can be told apart. This site’s shells wrap the page in <main> on purpose (the dashboard panel does not), which is the story the layout README tells.
A page has parts, and the parts have names. Use the element that carries the name and the region exists for everyone; use a <div> and it exists only for people who can see it.