Same look, no meaning: a div page
It looks fine, but a screen-reader user hears one long list of text and links with nothing to navigate by.
Elements like header, nav, main, article, section, aside and footer name the regions of a page, so browsers, search engines and screen readers know where the navigation, the main content and the extras are.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the semantic skeleton of a blog home page: site header with a logo and main navigation, a main area with two article previews (each with an h2), a sidebar with "About me", and a footer.
A page has a top menu and a footer menu, both in nav. Make them distinguishable to screen-reader users.
Add a skip link to the skeleton from task 1.
Explain it without notes
What does "semantic HTML" mean, and why does it matter if the page looks the same either way?
How do you decide between article, section and div?
What is a landmark, and which elements create them?
Can a page have several header elements? Explain.
Preview
Console
Nothing logged yet.Expected console output
Landmarks a screen reader can jump to: 0
Headings it can jump to: 0