HTML · Quick Reference

Lesson 24 — Nav, Main & Aside Cheat Sheet

HTML

In one line: <nav> marks a block of navigation links. It should wrap your main site menu, breadcrumbs, and in-page table of contents — but not every group of links. A list of "Related ...

Key Ideas

1nav — Navigation Links. <nav> marks a block of navigation links. It should wrap your main site menu, breadcrumbs, and in-page table of contents — but not every group of links. A list of...

2main — Primary Content. <main> wraps the content that is unique to this page — not the repeated navigation, header, or footer. There must be only one <main> per page. It gets ARIA...

3aside — Supplementary Content. <aside> holds content that is related to, but not essential to, the surrounding content. Removing it wouldn't break the article. Common uses: sidebars, pull quot...

4nav vs aside for Link Lists. The distinction between <nav> and <aside> for link lists is important:

Code Examples

<!-- Skip link — first focusable element on the page -->
<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<header>
  <nav aria-label="Main navigation">
    <ul role="list">
      <li>&...

<body>
  <header>...</header>
  <nav>...</nav>

  <!-- The id matches the skip link's href -->
  <main id="main-content">
    <!-- Unique page content only -->
    <h1>Page Title</h1>
    &...

<main>
  <article>
    <h1>CSS Grid Layout Guide</h1>
    <p>Main article content...</p>
  </article>

  <aside aria-label="Related content">
    <h2>Related Lessons</h2>
    <ul>
  ...