Last lesson you styled the page. Now strip the styling away and see what's left.

Open the dev tools and disable style.css for a moment (in the Network or Sources panel, or just comment out the <link>). The page loses its colours and layout — but if it was built from the right elements, it still reads as a document: a heading, a navigation, a list of pictures. A page built entirely from <div>s becomes an undifferentiated blob. That difference is the whole of this lesson.

Div soup

A <div> means nothing. It's an empty box. When every part of a page is a <div>, the browser, a screen reader, a search engine and your future self all see the same thing: boxes, no meaning.

<!-- div soup: technically renders, means nothing -->
<div class="navbar">…</div>
<div class="main">
  <div class="card">…</div>
</div>

HTML gives you elements that carry meaning. Use them:

<nav>…</nav>
<main>
  <article class="picture-card">…</article>
</main>

<nav>, <main>, <header>, <section>, <article> are landmarks. A screen-reader user can jump straight from one landmark to the next; on a page of <div>s there are none to jump to. There is exactly one <main> per page — the main content — and the browser knows it.

The fake button

Here is the trap that catches everyone. The favourite control on a card looks like a button, so it's tempting to build it from a <div>:

<!-- a button in appearance only -->
<div class="fav-btn">♡</div>

It styles fine. But you cannot Tab to it, Enter and Space do nothing, and a screen reader never announces it as a button. Every one of those you'd have to add back by hand — tabindex, key handlers, role="button" — to reinvent what one element already gives you:

<button class="fav-btn" aria-label="Save to collection">♡</button>

A real <button> is focusable, works from the keyboard, and announces its role — for free. You'll build exactly this on the card in the next step.

Which should be a <button>, and which a link? The favourite toggle, and Gallery in the nav — think first. — The favourite does something on this page, so it's a <button>. Gallery goes somewhere, so it's a link, <a>. The rule of thumb: navigates → <a>, acts → <button>.

Headings are an outline, not sizes

Headings describe structure. <h1> is the page's one title; <h2> is a section under it; <h3> a subsection under that. They form an outline, like a table of contents.

The mistake is choosing a heading by how big it looks. Don't reach for <h3> because <h2> "looks too large" — pick the level the structure calls for and set the size in CSS. And don't skip levels (<h1> straight to <h3>): a screen-reader user navigating by heading hears a gap where a section went missing.

Lists, and the skip link

A set of related items is a list — <ul> when order doesn't matter, <ol> when it does. A navigation is conceptually a list of links, and some teams write it as <nav><ul><li><a>…. This app styles the links as a plain row of <a> inside <nav> — also valid; the <nav> landmark is what does the work. The rule is only: when you have a list, use a list — never fake one with <br>.

Finally, the skip link — the very first thing a keyboard user reaches when they press Tab:

<a href="#main-content" class="skip-link">Skip to main content</a>

It's invisible until it's focused, and it jumps past the whole navigation straight to <main>. Without it, every keyboard visit begins by tabbing through every nav link, one by one. You'll add it as the first element in the body.