In this block you'll learn how to structure a whole website meaningfully - not just individual elements like headings or lists, but the major building areas of a page: header, navigation, main content, footer.

<div>: the all-purpose box

<div> ("division") is an element that carries absolutely no meaning of its own - it's simply a rectangular area you can put other elements into:

<div>
  <h2>About Me</h2>
  <p>Hi, I'm Finn!</p>
</div>

If you look at this in the browser, you'll see: visually, the <div> changes nothing at all at first. It just groups elements together logically - useful if you want to style that group together later, for example with CSS.

<span>: the same idea, but for text

<span> is the counterpart to <div>, but for within a piece of text, not for entire blocks:

<p>My favourite player is <span>Player A</span>.</p>

<span> also carries no particular meaning on its own - just like <div>, it's just a neutral "container", this time for a single word or a short piece of text instead of a whole block.

The real problem: no meaning

Imagine building an entire website out of nothing but <div> elements:

<div><!-- Header -->
  <h1>Finn's Football Website</h1>
</div>
<div><!-- Navigation -->
  <a href="index.html">Home</a>
</div>
<div><!-- Main content -->
  <p>Welcome!</p>
</div>

This page works technically - the browser displays it. But for a screen reader, a search engine, or simply a person reading your code later, every single one of these <div> elements looks exactly the same: just "some area". There's no difference between the area with the navigation and the area with the main content - even though that's obvious to a human, the computer doesn't know it unless we use comments like <!-- Navigation -->, which are (as you know from chapter 5) completely invisible to any tool that processes the page.

When you still use div and span

<div> and <span> aren't "wrong" or outdated - you simply use them exactly when there's no more fitting, more meaningful element available. But for the major fundamental areas of a page, as you'll see next, there's almost always a better, semantic alternative.