We recommend the <header> tag be used to designate the region at the top of the page that contains site-wide information, such as website logo, search, and navigation.
Another method that can be used in conjunction with HTML elements is WAI-ARIA roles. For the header, we recommend utilizing role="banner."
<header role="banner">…<img src="/images/example/MSU-Wordmark_White.png" alt="Michigan State University Wordmark">…</header>We recommend the <nav> tag be used to identify a navigation menu. Additionally, role="navigation" can be used to denote a navigation.
If a page has multiple navigation menus, we recommend using labels to differentiate between them. Labels should be short but descriptive. Headings, aria-label, or aria-labelledby can be used to provide a label.
<nav role=”navigation” aria-labelledby="mainmenulabel"><h2 id="mainmenulabel" class="visuallyhidden">Main Menu</h2></nav>We recommend the <main> element to identify the main content region of a web page. Additionally, role="main" can be used.
<main role="main"><h1>The Arts & Humanities in Action</h1>…</main>We recommend the <aside> element be used to identify regions that support the main content, yet are separate and meaningful sections on their own. Additionally, role="complementary" can be used.
<aside role="complementary"><h3>Related Articles</h3>…</aside>We recommend the use of <section> to denote subsections of the main content. The section element should be accompanied by an aria-label describing the section.
<section aria-label="name of the section">…</section>We recommend that <footer> be used to designate the region at the bottom of every page that contains site-wide information, such as copyright information, privacy statements, or disclaimers. Additionally, role="contentinfo" can be used.
<footer role="contentinfo">…<p>© Michigan State University</p>…</footer>