Structure & Semantics

You now know headings, paragraphs, lists, links, and images — enough to fill a page with real content. The last piece is organizing that content into regions a browser, a search engine, and a screen reader can all recognize at a glance.

Semantic sectioning elements

Picture walking into a building you've never visited. You can tell the entrance from the hallway, and the hallway from the room you actually came for, without reading a single sign — the layout itself tells you what each part is for. HTML has elements that work the same way: their names describe what a region of the page is, not only how it looks.

• header — the entrance: introductory content, usually at the top.
• nav — the directory board: a group of navigation links.
• main — the room you came for: the one piece of content unique to this page.
• footer — the way out: closing content, usually at the bottom.

<header>
  <h1>My Site</h1>
</header>
<nav>
  <a href="https://example.com/">Home</a>
</nav>
<main>
  <p>The actual content of the page goes here.</p>
</main>
<footer>
  <p>&copy; 2026</p>
</footer>

Each of these behaves like any other element — you can nest things inside them exactly as before — but their tag names carry meaning a div never could. A screen reader can jump straight to main and skip the entryway; a search engine can tell your real content apart from the boilerplate wrapped around it.

div: the room with no label

Sometimes you need a container that doesn't match any of those regions at all — a plain box to group a few things together, often so you can style them as a unit later. That's what div is for: a generic box with no meaning of its own, the way an unlabeled moving box holds whatever didn't fit a labeled one (every move has at least one of these).

<div>
  <p>A small aside that isn't a full page section.</p>
</div>

Common mistake

The most common mistake is reaching for div out of habit everywhere, even when a semantic element already fits — wrapping a page's whole introduction in a div when header already says exactly what it is. The rule of thumb: if header, nav, main, or footer describes the region you're building, use it. Save div for the moments none of them fit.

Exercise

Organize a page into regions

Build a small page shell: a header holding an h1, a nav holding a link, a main holding a paragraph, and a footer holding a paragraph — the entrance, the directory, the room, and the way out. Then add one plain div somewhere, wrapping content that doesn't belong to any of those regions.