--- title: "HTML: Semantic Elements" slug: "html-semantic-elements" category: "frontend" tags: ["frontend", "html", "semantics", "accessibility", "seo"] status: "stable" last_updated: 2026-05-14 summary: "Use the element that names the role: article, section, nav, main, aside, header, footer over div soup." related: ["[[frontend/html]]", "[[frontend/accessibility]]", "[[frontend/forms]]", "[[frontend/html-aria-patterns]]", "[[seo/technical]]"] --- ## Overview Every HTML element carries an implicit ARIA role that assistive technology, search crawlers, and browser reader modes consume. A page of nested `
` elements gives those consumers nothing. Replace each `
` with the element that names what the region actually is, and the document becomes navigable without a single line of JavaScript. ## `
` holds the page's primary content Use exactly one `
` per page. It wraps the content that is unique to this URL, not the chrome repeated across pages. Screen readers expose a "main" landmark that lets users jump straight to content, skipping headers and nav. Skip links work the same way: `Skip to content` anchors to this element. ```html
``` ## `
` wraps self-contained content Use `
` when the block makes sense on its own: a blog post, a news story, a product card, a comment. Self-contained means the content could be syndicated or embedded elsewhere without losing meaning. Articles can nest when a comment thread lives inside a post. ```html

Postgres 17 Released

The release ships logical replication improvements...

``` ## `
` groups thematic content within a page or article Use `
` for a named thematic block that belongs to a larger whole. Every `
` needs a heading (`

` through `

`) so the outline is legible. Do not use `
` as a generic container; that is what `
` is for. A section is wrong when the content is self-contained (use `
`) or when it is only there for styling (use `
`). ## `