New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
Every section of my page is a div with a class name, and I can't tell where the header ends and the content starts.
What you'll have at the end
The same page rebuilt with header, nav, main, and footer, each showing up as its own named landmark in the browser's accessibility tree, with the two navigations told apart by name.
You need
A rendered page built entirely from div elements standing in for its header, navigation, main content, and footer, with no landmark roles anywhere in the markup.
Not covered
Adding a visible skip-to-content link for sighted keyboard users, or turning a sidebar into its own complementary landmark: both build on these four landmarks once they exist, but neither is covered here.
Leans on
Give every icon-only button an accessible name
go there once your landmarks are in place and one of the icon-only buttons inside your new header or nav still reads as a bare button to a screen reader.
Build a valid HTML5 page from a blank file
go there instead if you're starting a page from nothing rather than rebuilding an existing div soup one.
Checked 20 Aug 2026
Part of the HTML cookbook