Semantic page structure

Why landmarks beat a wall of divs

A page built from <div class="header"> and <div class="main"> looks identical to one built from <header> and <main> — to a sighted mouse user. But a <div> carries zero meaning. The semantic elements map to ARIA landmark roles: <header> is banner, <nav> is navigation, <main> is main, <aside> is complementary, <footer> is contentinfo. Screen-reader users jump between landmarks the way you skim with your eyes, so the tag you pick is the table of contents they hear.

The seven you actually use

<header> introduces a page or section (logo, title, intro). <nav> wraps a block of navigation links — not every link, just the primary sets. <main> is the unique, central content of the page; there is exactly one per document and it must not sit inside <article>, <aside>, <header>, or <footer>. <article> is a self-contained, independently distributable unit (a blog post, a comment, a product card). <section> is a thematic grouping that almost always has a heading. <aside> is tangential content — a sidebar, a pull quote, related links. <footer> closes a page or section with metadata, copyright, or links.

Article vs section — the test that settles it

The confusion is constant, and the rule is simple: would the chunk still make sense lifted out and republished on its own — in a feed, an email, an RSS reader? Then it is an <article>. Is it just one thematic slice of a larger whole, glued to its surroundings by a heading? Then it is a <section>. An <article> can contain <section>s (a post split into "Intro", "Body", "Conclusion"), and a <section> can contain <article>s (a "Latest posts" section listing several article cards). Never reach for <section> purely as a styling hook — that is what <div> is for.

Tags that describe their content

Two smaller elements round out a semantic page. <figure> with <figcaption> ties an image, chart, code listing, or diagram to a caption as one referenceable unit — the caption belongs to the figure, not just floating text beneath it. And <time> wraps a date or duration with a machine-readable datetime attribute, so "last June" or "3 days ago" still parses to an unambiguous ISO value for browsers, calendars, and crawlers.