Inside main: giving content its own structure

The skeleton is built: now fill it with meaning

The last course built a page's skeleton: header, main, footer, each mapping to a landmark (banner, main, contentinfo) that a screen reader user can jump straight to. That skeleton says nothing yet about what's inside <main>. A product page, a blog post, and a search results page all fit the same skeleton while needing completely different internal structure.

<main>
  <!-- Everything this course covers happens here -->
</main>

Four new tags and their roles

This course covers the four tags the Layout course promised were coming. nav, aside and named sections are landmarks; article has a role but isn't a landmark:

You can verify every one of these the way Lesson 5 of the last course showed: DevTools' accessibility tools display the role a screen reader receives.

Why this set of four, specifically

Each solves a distinct structural problem that <div> and <main> alone can't:

• A page with three separate blog posts on it: where does one post end and the next begin? (article)
• A single long article with an Introduction, a Features list, and a Conclusion: how does a reader (or a screen reader's outline feature) jump between them? (section)
• A page with a primary menu, a breadcrumb trail, and pagination links: which of these are "navigation" and which are just lists? (nav)
• A sidebar with related products, ads, or a pull quote: content real enough to include, but not the reason someone came to this page (aside)

The test that carries over from last course

The Layout course's Lesson 6 test still applies: without the CSS, would this grouping still read as a meaningful, distinct unit? Each lesson here teaches one kind of "yes". Lesson 6 brings the four together into one decision process, because the tags are easy to confuse with each other as well as with div.

How this course is organized

• Lesson 2: article, independent, self-contained content
• Lesson 3: section, grouping related content under a heading
• Lesson 4: nav, marking the links that matter
• Lesson 5: aside, related but not essential
• Lesson 6: choosing between article, section, div and aside with one decision process
• Lesson 7: structuring a real product page's content end to end

Key takeaways

• This course adds four content-level semantic tags inside <main>: article, section, nav and aside, each with its own accessibility role.
• Each tag solves a specific structural ambiguity plain divs and headings alone leave unresolved.
• The Layout course's "would this still make sense without CSS?" test carries over. Now it also separates these four tags from each other.
• Every claim in this course is checkable in DevTools' Accessibility panel, as demonstrated in the previous course.