Semantic HTML tags describe what a piece of content is , not how it looks. Swap <div class="navigation"> for <nav> and nothing changes on screen, but a screen reader user can now jump straight to your menu with one keystroke.

Five semantic HTML tags do most of that work: <main> , <nav> , <article> , <section> and <aside> . Below is what each one means, a before/after for each, and the mistakes that show up most often in beginner code reviews.

Quick reference

Tag What it means How screen readers see it Typical use

<main> The page's primary content Main landmark Everything unique to this page (once per page)

<nav> A major block of navigation links Navigation landmark Site menu, breadcrumbs, table of contents

<article> A self-contained piece of content Article (not a landmark) Blog post, product card, comment

<section> A themed group with a heading Region landmark, only when it has an accessible name Parts of a long page

<aside> Related but non-essential content Complementary landmark (when top-level)…