Semantic HTML and landmarks

What it is

HTML elements carry meaning beyond appearance: <main> marks the primary content, <nav> navigation, <header> and <footer> page or section chrome, <article> self-contained content, <aside> tangential content. Headings h1–h6 form an outline; ARIA landmarks are implied by these elements and only needed where native elements do not fit.

Why it matters

Screen readers offer landmark and heading navigation; search engines and language-model agents use the same structure to find the content among the chrome. Divs with classes carry none of that.

How to apply

• Exactly one <h1> per page, then h2 for major sections, h3 inside them; do not skip levels for styling reasons.
• One <main> per page; put the skip link's target on it.
• Label repeated landmarks (<nav aria-label="Main">, <nav aria-label="Article views">).
• Use lists for lists, tables for tabular data with <th> headers, <time datetime> for dates, <code>/<pre> for code.
• Mark language changes with lang on the element that contains the other language.

Pitfalls

Multiple <main> or <h1> elements confuse the outline. Headings used for typography produce a nonsensical outline. Interactive elements built from <div> need keyboard handling and roles that native buttons and links provide for free.