Swap div soup for semantic landmarks

My whole page is just one div after another.

BeginnerRead 4 minDoing: under an hour6 steps

▶ Start

What you'll have at the end

A page whose header, nav, main and footer are announced by name to a screen reader

Before you start

You need

A live web page whose masthead, navigation, main content and footer are all still generic divs, that you're free to edit directly.

Not covered

How ARIA widget roles such as tablist or dialog work, and how the page actually sounds read aloud by a real screen reader rather than the browser's own accessibility inspector.

Leans on

HTML5 Cheat Sheetcovers each landmark element's own tag, which is what the div wrappers get swapped for.
Web Accessibility Cheat Sheetcovers exactly when header, nav and footer keep their landmark role and when nesting takes it away.

Turn the div soup into real landmarks

Mark the four regions before touching tags
Give each region its real landmark tag
Confirm header and footer sit outside main

Make it provably complete

Give each navigation region its own name
Read the landmark list the browser actually builds
Add a skip link that actually moves focus

Checked 25 Aug 2026

Part of the HTML5 cookbook