Boxes and sections

Boxes and sections

• Bigger pages need structure — clear areas, not one long pile.
• A <div> is a plain box. A <span> is a small inline box for a few words.
• Boxes group things together, so you can arrange and style them later.

Named sections

• HTML has special boxes with meaningful names:
• <header> (top), <main> (the main content), <footer> (bottom), <nav> (menu links).
• They work like <div>, but the names tell people — and search engines — what each part is.

<header>
  <h1>My site</h1>
</header>
<main>
  <p>Welcome to my page.</p>
</main>
<footer>
  <small>Made by me</small>
</footer>

Classes name your boxes

• A class is a label you add to a tag: <div class="card">.
• It does nothing on its own — but soon, CSS will use it to style that box.
• This is your bridge into the next half of the course.

Common mistakes

• <div> is a block (new line); <span> is inline (stays in the text).
• Use semantic tags like <header> and <nav> where they fit.

Now you try

• Add a <header> and a <footer>, then give a box a class.
• Next lesson, we start making things look good with CSS.