Semantic HTML: the free accessibility you're not using
A <div> tells the browser nothing. A
<main>, <nav>, or
<article> tells every browser, search engine, and
screen reader exactly what that region is — for free, with no extra
attributes. That free meaning is called semantics, and the
elements below hand you SEO jumps and keyboard navigation without a
line of JavaScript.
Why semantics win
Screen readers expose a "landmarks" menu: a user hits a key and jumps
straight to main, skipping your entire header and nav.
Search engines weight the single <h1> as the page
title. None of that works if you built the page out of
<div class="nav"> — a div has no implicit ARIA role,
so the landmark never exists.
<article> is structurally inside
<main> but is its own distributable unit.
The one rule: a section needs a heading
A bare <section> with no heading and no accessible
name exposes no landmark — it collapses to a generic
box. Give it a heading wired up with aria-labelledby and
it lights up as role: region. That is why "a section
requires a heading" is a structural rule, not a style preference.
The anatomy of a landmark
A landmark is just an element whose implicit ARIA role is one of
banner, navigation, main,
complementary, contentinfo,
form, search, or region. You get
them by using the right tag — never by writing
role="..." on a div. The tag is the source of truth.