Semantic HTML: content
Semantic HTML: content covers four tags that give structure to what sits inside main: article, section, nav and aside. Each lesson explains what one tag marks and which accessibility role it exposes, a role you can check in the DevTools Accessibility panel. The course shows when a section needs an accessible name, how to tell several nav blocks apart, and when an aside keeps the complementary role. It ends with a four-question decision process and a full product page built in Rails.
What you'll learn
- ✓Marking self-contained content with article, including nested comments
- ✓Grouping thematic parts with section and giving each one an accessible name
- ✓Reserving nav for major navigation blocks and labeling each one with aria-label
- ✓Using aside for tangential content and the complementary role
- ✓Choosing between div, article, aside and section with four ordered questions
- ✓Checking each role in the DevTools Accessibility panel
Inside main: giving content its own structure
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…
Read the full lesson free →Curriculum
7 lessonsInside main: giving content its own structure
Introduces article, section, nav and aside, the structural problem each solves, and their accessibility roles.
article: independent, self-contained content
Uses the syndication test to identify article content, with local header and footer and nested comments.
section: grouping related content under a heading
Defines section as a thematic part of a larger whole that needs an accessible name for the region role.
nav: marking the links that matter
Reserves nav for major navigation blocks, labels multiple nav elements, and builds breadcrumbs with ol and aria-current.
aside: related, but not essential
Marks removable, tangential content with aside and explains when it keeps the complementary landmark role.
Choosing between article, section, div, and aside
Applies four ordered questions to choose between div, article, aside and section in the same markup.
Putting it all together: structuring a real product page's content
Structures a full Rails product page with every tag and checks the expected roles in DevTools.