Signposts for every visitor
A page has regions: a header with the logo, navigation, the main content, a sidebar, a footer. semantic HTML names them, so screen reader users can jump straight to "main" — and your code reads like an outline.
The landmark elements
- header / footer — intro and closing info (for the page, or for an article).
- nav — major navigation links.
- main — the page's unique content. Exactly one per page.
- section — a themed group, usually with a heading.
- article — something that stands alone: a post, a product card, a comment.
- aside — related but secondary content.
- div and span mean nothing — use them only for styling hooks.