More Accessible with Semantic HTML
I used to wrap everything in <div> tags. Navigation? Div. Header? Div. Footer? You guessed it — div. The page looked fine. But a screen reader saw it as a...
13 Mar 2024

I used to wrap everything in <div> tags. Navigation? Div. Header? Div. Footer? You guessed it — div. The page looked fine. But a screen reader saw it as a wall of meaningless containers.
Semantic HTML fixes that. It replaces generic wrappers with elements that carry meaning — <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. The browser, the screen reader, and the search engine all understand what each part of the page is, not just how it looks.
Why it matters
Screen readers rely on semantic elements to build a mental map of the page. A <nav> tells the user "here are the links to get around." A <main> says "skip the noise — the content starts here." Without these signals, assistive technology has to guess. It guesses badly.
Search engines benefit too. Structured markup gives crawlers a clearer picture of your content hierarchy. Semantic HTML is free SEO.
The elements and when to use them
<header>— logos, site titles, top-level navigation<nav>— groups of navigation links (main nav, breadcrumbs, pagination)<main>— the primary content of the page (only one per page)<section>— thematic groupings of content, each with a heading<article>— self-contained content that could stand alone (blog posts, comments, cards)<aside>— supplementary content like sidebars or callouts<footer>— copyright, contact info, secondary links
The trade-off
Semantic HTML costs almost nothing. You swap a <div> for a <nav> and the structure improves immediately. The only real cost is discipline — you have to think about what an element means, not just how to style it. That mental shift takes time but pays off fast.
Validating your work
Use tools like axe, Lighthouse, or WAVE to audit your markup. They catch missing landmarks, heading order violations, and other structural issues. Run them early. Run them often. Fixing semantic problems after the fact is harder than getting them right from the start.
Semantic HTML is the lowest-effort, highest-impact accessibility improvement you can make. Start there.