Landmarks

All elements on a page should be contained in a landmark element. This helps users of accessible technology quickly navigate a page. HTML5 provides built in landmark elements such as main, nav, aside, header, footer. When using HTML5 elements, don’t define role.

When using HTML4 use ARIA role on divs to define landmark elements such as role="main".

HTML5 Landmark Elements

• main
• header
• footer
• nav
• aside
• article
• section

Testing

1. Identify content in the source code
2. Check that all rendered content is contained by a landmark element

Examples

HTML5

<br />
&lt;!DOCTYPE html&gt;<br />
&lt;html&gt;<br />
  &lt;head&gt;<br />
    &lt;meta charset=&quot;UTF-8&quot;&gt;<br />
    &lt;title&gt;Sample page&lt;/title&gt;<br />
  &lt;/head&gt;<br />
  &lt;body&gt;<br />
    &lt;header&gt;<br />
      &lt;h1&gt;Site Name&lt;/h1&gt;<br />
    &lt;/header&gt;<br />
    &lt;nav&gt;<br />
      &lt;ul&gt;<br />
        &lt;li&gt;Home&lt;/li&gt;<br />
        &lt;li&gt;&lt;a href=&quot;./otherpage/&quot;&gt;Other Page&lt;/a&gt;&lt;/li&gt;<br />
      &lt;/ul&gt;<br />
    &lt;/nav&gt;<br />
    &lt;main&gt;<br />
      &lt;article&gt;Here's an article&lt;/article&gt;<br />
    &lt;/main&gt;<br />
    &lt;footer&gt;Footer&lt;/footer&gt;<br />
  &lt;/body&gt;<br />
&lt;/html&gt;<br />

HTML4

<br />
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;<br />
&lt;html&gt;<br />
  &lt;head&gt;<br />
    &lt;meta charset=&quot;UTF-8&quot;&gt;<br />
    &lt;title&gt;Sample page&lt;/title&gt;<br />
  &lt;/head&gt;<br />
  &lt;body&gt;<br />
    &lt;div role='banner' id='header'&gt;<br />
      &lt;h1&gt;Site Name&lt;/h1&gt;<br />
    &lt;/div&gt;<br />
    &lt;div role='navigation' id='main-nav'&gt;<br />
      &lt;ul&gt;<br />
        &lt;li&gt;Home&lt;/li&gt;<br />
        &lt;li&gt;&lt;a href=&quot;./otherpage/&quot;&gt;Other Page&lt;/a&gt;&lt;/li&gt;<br />
      &lt;/ul&gt;<br />
    &lt;/div&gt;<br />
    &lt;div role=&quot;main&quot;&gt;<br />
      &lt;div&gt;Here's an article&lt;/div&gt;<br />
    &lt;/div&gt;<br />
    &lt;div role='contentinfo'&gt;Footer&lt;/div&gt;<br />
  &lt;/body&gt;<br />
&lt;/html&gt;<br />