Skip to content
WANCODE
BM

Understanding HTML Structure

13 minBeginnerHTML · CSS · JS

In this lesson

  • Use header, nav, main, section, article and footer for the big regions of a page
  • Explain why semantic elements beat a page made only of <div>s
  • Read nested HTML as a tree of parents, children and siblings (the DOM)

The big idea

A page has regions: a top bar, navigation, the main content, a footer. HTML has an element for each one. Using them makes your structure readable by people, browsers and assistive technology alike.

The problem with "div soup"

<div> is a generic box with no meaning. It's useful, but a page built only from divs is like a house where every room is labelled "room". The class names help you, but the browser and screen readers can't tell the menu from the footer.

Div soup

HTML
<div class="top">
  <div class="menu">…</div>
</div>
<div class="content">…</div>
<div class="bottom">…</div>

Semantic layout

HTML
<header>
  <nav>…</nav>
</header>
<main>…</main>
<footer>…</footer>

Same boxes, same look, but now each one says what it is.

<header>
Introductory content: usually the site name or logo, often with the navigation.
<nav>
A block of main navigation links. Not every group of links, just the important ones.
<main>
The main content of this page. Use exactly one visible <main> per page.
<section>
A themed group of content, normally with its own heading ("About us", "Events").
<article>
A self-contained piece that would still make sense on its own: a blog post, a news story, an event card.
<footer>
Closing info: copyright, contact details, small print.

Does it change how it looks?

Not really. These elements look like plain divs until you style them. The difference is meaning: screen readers can offer "jump to main content" or "go to navigation", and search engines know which part is the real content. Divs are still fine for boxes that exist only for styling.

Your page is a tree

When the browser reads your HTML, it builds a tree of objects called the DOM (Document Object Model). Every element is a node. An element directly inside another is its child; the outer one is its parent; elements sharing a parent are siblings. Later, CSS and JavaScript both find things by walking this tree.

Nesting in your HTML becomes branches in the DOM tree.
Text
body
├── header
│   ├── h1
│   └── nav
│       ├── a
│       └── a
├── main
│   ├── section
│   │   ├── h2
│   │   └── p
│   └── section
│       ├── h2
│       └── article
└── footer

The finished page from this lesson as a tree. nav is a child of header; header, main and footer are siblings.

Want to see the real tree of any website? Right-click a page in your browser and choose Inspect. The Elements panel is the live DOM.

This meetup page is pure div soup. Swap the outer divs for semantic elements, keeping each class and id so the styles still apply:

- div.site-top → <header>

- div.menu → <nav>

- div.content → <main>

- div.site-bottom → <footer>

Change both the opening and the closing tag each time.

Checks

  • A <header> holds the site title
  • The menu links are inside a <nav>
  • Exactly one <main>
  • A page-level <footer>

Check understanding

Q1

How many visible <main> elements should a page have?

Q2

In <nav><a href="#">Home</a></nav>, what is the <a> to the <nav>?

Q3

Which of these is the best fit for <article>?

What you learned

  • header, nav, main, section, article and footer describe the regions of a page; div is a meaningless box for styling.
  • Use one <main>; give each <section> a heading; use <article> for self-contained pieces.
  • The browser turns your nested HTML into the DOM tree: parents, children and siblings.
Preview

Console output from your code appears here.

Step 1 of 2