Semantic Elements

You could build an entire page out of nothing but <div>s. Browsers wouldn't complain. But a stack of unlabeled boxes tells nobody — not a screen reader, not a search engine, not the next developer — what any part of the page actually is. Semantic elements fix that by naming the role a section plays.

Why the name matters, not just the look

A <div> and a <section> can be styled to look identical. The difference is invisible on screen and very visible everywhere else: a screen reader can jump straight to "navigation" or "main content" for someone who can't see the layout, and a developer opening the file six months later can tell what's what without reading every class name.

The elements you'll reach for most

• <header> — introductory content for a page or a section: a logo, a site title, a set of nav links.
• <nav> — a block of navigation links.
• <main> — the primary content of the page. There should only be one per page.
• <section> — a distinct, thematically-related chunk of content, usually with its own heading.
• <article> — a piece of content that would make sense on its own, out of context — a blog post, a forum comment, a news story.
• <aside> — content that's related but tangential, like a sidebar or a pull quote.
• <footer> — closing content for a page or section: copyright, contact info, secondary links.

Here's a small page skeleton using several of them together. Try swapping <section> for another tag and see that nothing looks different — the meaning is what changed:

Nesting is normal

A page usually has one <header> and <footer> for the whole site, but an individual <article> can have its own smaller <header> too — a post's title and date, for instance. Semantic meaning is about role, not position, and the same tag can appear at different levels of a page.