# Structure Elements: header, nav, main, section and footer

Structure elements such as header, nav, main and footer label the big parts of a page by what they are, which helps people using screen readers, search engines, and you when you style each part.

Novice · HTML · CSS · Updated November 1, 2026

## After this lesson you can

- Mark up a page's parts with header, nav, main, section, article and footer
- Choose between a meaning element and a div or span, and explain who the meaning helps

## Key takeaways

- `<header>`, `<nav>`, `<main>` and `<footer>` label a page's big parts: the top, the menu, the main content and the bottom.
- `<section>` groups content on one theme under a heading. `<article>` holds something that makes sense on its own, such as a pet's card.
- `<div>` and `<span>` are boxes with no meaning: `<div>` for a block, `<span>` for words inside a line. Use them when no other element fits.
- Choosing elements for their meaning is called semantic HTML. It lets screen readers jump between parts, and lets CSS style each part by name.

Look at almost any website and you'll find the same parts: a bar across the top with the name or logo, a menu of links, the main content, and a strip at the bottom with an address or a copyright line. Styling a page mostly means styling those parts: "make the top bar dark blue", "put the menu links in a row", "make the footer text gray". HTML has an element for each one, and once your page uses them, CSS can find every part by name.

## Labeling the rooms

On moving day, a box labeled *kitchen* goes straight to the kitchen. A box labeled *stuff* gets left in the hall while someone opens it to find out. HTML has labels for the "rooms" of a page:

```html
<body>
  <header>
    <p>Paws & Whiskers</p>
    <nav>
      <a href="index.html">Home</a>
      <a href="pets.html">All pets</a>
      <a href="adopt.html">How to adopt</a>
    </nav>
  </header>
  <main>
    <h1>Meet Biscuit</h1>
  </main>
  <footer>
    <p>Paws & Whiskers, 412 Willow Lane. Open Tuesday to Sunday.</p>
  </footer>
</body>
```

- **`<header>`**: the top of the page, with the site's name or logo. It often holds the menu too.
- **`<nav>`**, short for *navigation*: the menu of links to other pages.
- **`<main>`**: the content that is this page's own, the part that's different on every page. A page has one.
- **`<footer>`**: the bottom of the page, with contact details, a copyright line, or links to the small print.

These big parts are called **landmarks**: the places a visitor can find their way by.

## section and article

Inside `<main>`, two more elements group the content:

```html
<main>
  <h1>Meet Biscuit</h1>
  <section>
    <h2>Biscuit's story</h2>
    <p>Biscuit came to us when his family moved to an apartment that doesn't allow dogs.</p>
  </section>
  <article>
    <h3>Pepper</h3>
    <p>A two-year-old cat who sleeps in sunbeams.</p>
  </article>
</main>
```

- **`<section>`** groups content on one theme, and it starts with a heading: *Biscuit's story*, *Fast facts*, *Other pets you might like*.
- **`<article>`** holds something that makes sense on its own, so it could be moved to another page and still be complete: a pet's card, a blog post, a review. Pepper's card could appear on the home page or on a "cats" page unchanged.

When you aren't sure which to use, ask: "would this make sense on its own, somewhere else?" If yes, it's an `<article>`. If it only makes sense as part of this page, it's a `<section>`.

## div and span: boxes labeled "stuff"

Sometimes you need a box only so CSS can style it: a frame around Biscuit's photo, or a price in a different color. No meaningful element fits, and that's what `<div>` and `<span>` are for. They carry no meaning at all:

```html
<div>
  <img src="images/biscuit.jpg" alt="Biscuit the beagle sitting in the grass, ears up">
</div>
<p>Adoption fee: <span>$150</span>, which covers his shots and a microchip.</p>
```

- **`<div>`** (short for *division*) is a box that starts on its own line, like a paragraph does. It can hold anything.
- **`<span>`** wraps a few words inside a line of text, without breaking the line.

On their own, they don't change how anything looks. In the next lesson, *Hooks for CSS: the class and id Attributes*, you give them names that CSS can find. Reach for a meaningful element first, and use `<div>` or `<span>` when none fits.

## Who the meaning helps

Choosing elements for what their content *is* is called **semantic HTML** (*semantic* means "to do with meaning"; your class may call these elements *semantic elements* or *sectioning elements*). It helps three kinds of reader:

- **People using screen readers.** A screen reader can list a page's landmarks and jump straight to `<main>`, skipping the menu they've already heard on every page. A page built from `<div>`s gives them nothing to jump to.
- **Search engines**, which read `<main>` and `<article>` to work out what the page is about.
- **You, writing CSS.** Every part already has a name to aim at, with no extra labels:

```css
header {
  background-color: darkslateblue;
}

footer {
  color: dimgray;
}
```

![The Meet Biscuit page drawn as an outline: a header across the top holding the site name and the nav links, the main area below it with Biscuit's heading, story section and two pet card articles, and a footer across the bottom](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/fa730da2b7f747868656a9414a68713e.webp)

**Try it.** Wrap the content of your `meet-biscuit.html` in a `<header>`, a `<main>` and a `<footer>`, as in the first example, and add a `header` rule to `styles.css`. Save, and the whole top of the page changes color at once.

## Check yourself

2 questions to try on the lesson page.

## So what

A page whose parts are labeled by meaning is easier for everyone to use, and easier to style: when CSS can say `header`, `nav` and `footer`, half your work of pointing at things is already done.

## Key terms

- [Semantic HTML](https://www.ask-codey.com/glossary/semantic-html)
- [Landmark](https://www.ask-codey.com/glossary/landmark)
- [&lt;div>](https://www.ask-codey.com/glossary/div)
- [&lt;span>](https://www.ask-codey.com/glossary/span)

## Cheat sheets

- [Structure Elements: header, nav, main, section and footer](https://www.ask-codey.com/cheat-sheets/css-html-structure-elements-cheat-sheet)

## Related

- [The Page Skeleton, and Three Places CSS Can Go](https://www.ask-codey.com/lessons/css-html-page-skeleton)
- [Hooks for CSS: the class and id Attributes](https://www.ask-codey.com/lessons/css-html-class-and-id)

Source: https://www.ask-codey.com/lessons/css-html-structure-elements