Semantic page layout · 15 MIN

Semantic landmarks

Elements such as header, nav, main, section, article, aside and footer describe the role of page regions. Prefer native semantic elements over generic divs when a meaningful element exists. Keep one main landmark for the primary page content.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.

Code example

<header><h1>My site</h1></header>
<nav aria-label="Main"><a href="/">Home</a></nav>
<main><article><h2>News</h2></article></main>
<footer>Copyright 2026</footer>

Practise this lesson