Please note: If a landmark occurs more than once on the page, each must have a unique label.
role="banner"
A banner landmark identifies site-oriented content at the beginning of each page within a website. Typically includes things like the site logo and a search tool. Usually appears at the top of the page and typically spans the full width. Must be a top-level landmark.
role="complementary"
A complementary landmark is a supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content. Usually a sidebar. Must be a top-level landmark.
role="contentinfo"
A contentinfo landmark is a way to identify common information at the bottom of each page within a website, including information such as copyrights and links to privacy and accessibility statements. Typically the footer. Must be a top-level landmark.
role="form"
A form landmark identifies a region that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate.
role="main"
A main landmark identifies the primary content of the page. Must be a top-level landmark.
role="navigation"
A navigation landmark identifies a group of links that are intended to be used for website or page content navigation.
role="region"
A region landmark is a perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Must also have a label. Can be used to identify content that no other landmark properly describes.
role="search"
A search landmark contains a collection of items and objects that, as a whole, combine to create search functionality to content on the website. Used in place of the form landmark when the form is a search form.
<body>
<header></header>
<main></main>
<footer></footer>
</body>
<body>
<header></header>
. <aside role="complementary" aria-label="left sidebar"></aside>
<main></main>
. <aside role="complementary" aria-label="right sidebar"></aside>
<footer></footer>
</body>
<body>
<header role="banner"></header>
<main role="main">
. <nav role="navigation"></nav>
. <form role="form"></form>
</main>
. <aside role="complementary">
<form role="search"></form>
</aside>
<footer role="contentinfo"></footer>
</body>
<body>
<header role="region"></header>
<main role="region"></main>
<footer role="region"></footer>
</body>
<body>
<div>header content</div>
<div>main content</div>
. <div>sidebar</div>
<div>footer content</div>
</body>
<body>
<header role="banner"></header>
<main>
. <div role="main"></div>
</main>
. <aside>
. <div role="complementary">
</aside>
<footer role="contentinfo"></footer>
</body>