Semantic tags vs. div soup — Blank to Browser

1. Principle

HTML5 added a set of semantic tags — tags that describe what a section of the page means, not just how it should look.

Tag	Used for
`<header>`	The introductory part of a page or section (logo, name, top nav)
`<nav>`	A block of navigation links
`<main>`	The main content of the page (only one per page)
`<section>`	A thematic group of content (usually with its own heading)
`<article>`	A self-contained piece of content (a blog post, a comment)
`<aside>`	Tangentially related content (a sidebar, a tip box)
`<footer>`	The closing part of a page or section (copyright, contact info)

A page made entirely of <div> elements is called div soup. It renders fine. But:

Screen readers can't tell where the nav ends and the content begins.
Search engines rank content lower when they can't identify the main content.
You (in six months) will struggle to read your own code.

2. Do (you try)

Restructure your <body> to use semantic tags:

htmlindex.html — body

<body>
<header>
  <h1>Your Name</h1>
  <nav>
    <a href="#about">About</a> ·
    <a href="#projects">Projects</a> ·
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <section id="about">
    <h2>About</h2>
    <img src="profile.jpg" alt="..." width="200" height="200">
    <p>...</p>
  </section>

  <section id="projects">
    <h2>Projects</h2>
    <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Email me at <a href="mailto:you@example.com">you@example.com</a>.</p>
  </section>
</main>

<footer>
  <p>© Your Name 2026</p>
</footer>
</body>

Replace the ... placeholders with the content you already wrote in previous units. Move your existing content into the new structure; don't lose any.

Save and refresh.

3. Verify (how you know)

Visual check: Your page should look identical to before. Semantic tags don't change appearance by default — they only add meaning.

Inspect audit: Right-click → Inspect. The DevTools Elements tree should look like:

<body>
  <header>
    <h1>...
    <nav>...
  <main>
    <section id="about">...
    <section id="projects">...
    <section id="contact">...
  <footer>...

Outline test: Read just the tag names out loud: "header, nav, main with three sections, footer." That should sound like a sensible page structure.

If you used <section> without a heading inside it, that's wrong — every <section> should have its own heading. (An anchor id alone is not enough; the user/screen reader needs the heading too.)

4. Reference

Locked. Try it yourself first.