Visual page regions.
1. Page landmarks
Outline header, nav, main, footer structure.
<header>...</header>
<nav aria-label="Primary">...</nav>
<main>...</main>
<footer>...</footer>2. article + h2
Blog post or card with its own heading.
Post title
Excerpt text.
Self-contained content block.
<article>
<h2>Title</h2>
<p>...</p>
</article>3. aside for tangential content
Related links or glossary sidebar.
Complements main, not primary.
<aside aria-labelledby="related-heading">...</aside>Frequently asked questions
- Can I have two main elements?
- No. Only one visible main per page. Use section inside main for regions.
- div with role=navigation?
- Prefer native nav; role is for when you cannot use the element.
- section without heading?
- Avoid empty sections; use div if there is no heading.