Semantic HTML isn’t about “writing it correctly.” It’s a vocabulary for signaling structure — to machines and to humans. This is a short rewrite of the rules I actually use day to day.

The short version

  • If div is enough, use div. Reach for a semantic tag only where there’s a real role
  • Areas with a fixed role on the page get their dedicated tag
  • Don’t break heading order (h1 → h2 → h3)

Constraints

  • HTML5 and later; I’m not covering <center> and friends
  • Aimed at three audiences: screen readers, search engines, and future-me

Per-tag decisions

header / footer

  • They work for the whole page, but also for the header/footer of a single article
  • Useful for separating “intro vs. body” or “body vs. closing notes”
  • Only on primary navigation. Not every collection of links on the site
  • Breadcrumbs and tables of contents qualify

article / section

  • article is a self-contained unit (a blog post, a product card)
  • section is a heading-defined chunk of meaning — easiest to think of as something that pairs with an h2

Closing

  • “Default to div, switch to semantic when the role is real” is enough day to day
  • Lining up headings with region tags pays off for accessibility and AI consumption equally