Reference guide · html-css-js · Published 2026-08-15 · 4 min read
Semantic HTML elements and why they matter
Use semantic HTML elements: header, nav, main, section, article, aside, footer, for screen readers, SEO and maintainable CSS.
- ·Element roles
- ·Div soup fixes
- ·Heading order
What semantic means
Semantic HTML uses elements that carry meaning: a <header> is a page or section header, a <nav> is navigation, and an <article> is a self-contained piece of content. The opposite is the plain <div>, which carries no meaning at all and only groups visual layout. A page built from div elements works in a browser but tells assistive technology and search engines very little about the shape of the content. It also tends to need a class name on everything, because there is no built-in behaviour to lean on.
The core elements and their roles
| Element | Meaning | Typical use |
|---|---|---|
<header> | Page or section banner | Site header, intro block of an article |
<nav> | Navigation landmark | Primary menu, in-page index |
<main> | The central content of the page | Exactly one per page |
<section> | Thematic grouping with a heading | A chapter of a long page |
<article> | Self-contained composition | Blog post, forum reply, product card |
<aside> | Content loosely related to the main flow | Sidebar, related links, pull quote |
<footer> | Footer for the page or a section | Site footer, article credits |
<h1> to <h6> | Heading levels in order | Titles and subheadings |
A skeleton page looks like this:
<body>
<header>
<p>Site title and tagline</p>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
</ul>
</nav>
<main>
<h1>Page title</h1>
<section>
<h2>First chapter</h2>
<p>Body text.</p>
</section>
</main>
<aside>Related link</aside>
<footer>
<p>Copyright and legal</p>
</footer>
</body>What screen readers and SEO do with it
Assistive technology turns these elements into landmarks: a user can jump from navigation to main content to footer without reading everything in between. If the navigation is a <div> with a class instead of a <nav>, the screen reader user must tab through every link and guess where the content begins. Semantic elements also carry their roles already. A <nav> is a navigation landmark by default, with no ARIA attributes needed. Landmarks are the cheapest accessibility win on a page that is otherwise all divs.
Search engines use the same shape. The heading hierarchy tells a crawler how the page is organised, main marks the primary content, and nav and footer are treated as repeated page chrome. One <h1> per page that matches the title tag, followed by a clean order of <h2> and <h3> headings, reads like a plan for the page. The technical SEO crawling guide explains how structure influences crawling and indexation.
The heading order rule
Headings are a contract: <h1> for the page title, <h2> for each major section, <h3> inside those sections, and so on. Do not skip levels to make text bigger, and do not hold an <h2> just because you want the font size. If the visual size is the goal, change CSS, not the element. Assistive technology users navigate page areas by heading list, so a skipped level or a buried <h4> makes orientation harder.
Common fixes on a div soup page
- Replace the wrapper
<div id="nav">with<nav>. The visual style stays identical. - Replace
<div id="content">with<main>and close it before the footer. - Mark up each list item or post card as
<article>, one element per item. - Flow comments, author information and secondary links into
<aside>. - Keep exactly one
<h1>per page and a sensible heading order beneath it. - Add a visible keyboard and screen reader accessible "Skip to main content" link. Screen readers can jump directly, but sighted keyboard users need a bridge over the header and nav.
The cost and the trade-off
Non-semantic tags add no download weight, so moving from divs to semantic elements costs nothing on the network. The real cost avoided is the maintenance of pages where structure is guessed from visual class names. When the CSS breaks, the semantic markup still tells you what the layout was meant to do. The accessible forms article shows the same principle applied to form fields, and the accessibility CSS and JS article covers the styling side of the same page structure.