Step 1.4 · Day 1: HTML structure

Build the page structure

Lay out the page’s big boxes first, the way you would block out a layout before adding content.

You will work in: index.html

Everything in this step goes between <body> and </body>. You will build the frame of the page now and fill each box in the next two steps.

Type the header. It holds the site name and the navigation links.

index.html (inside <body>)

  <!-- ===== HEADER: site name and navigation ===== -->
  <header class="site-header">
    <div class="logo">
      <h1>Happy Tails</h1>
      <p class="tagline">A friendly guide to dogs</p>
    </div>
    <nav>
      <ul>
        <li><a href="#breeds">Breeds</a></li>
        <li><a href="#care">Care</a></li>
        <li><a href="#adopt">Adopt</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

Code	What it does
`<header>`	The top of the page. `class="site-header"` is a label CSS will use to style it.
`<div class="logo">`	A plain box that groups the name and tagline so CSS can move them together. `<div>` has no meaning of its own.
`<h1>`	The most important heading. Use only one per page: the site name.
`<nav>`	Marks the main navigation, so screen readers can jump straight to it.
`<ul>` and `<li>`	An unordered (bulleted) list and its items. Navigation is a list of links.
`<a href="#breeds">`	A link. `#breeds` means “jump to the element on this page with `id="breeds"`.” You add those IDs next.

Type the main area and its sections below the header.

index.html (below </header>)

  <main>

    <!-- ===== HERO: big photo and welcome message ===== -->
    <section class="hero">
    </section>

    <hr>

    <!-- ===== BREEDS: three cards ===== -->
    <section id="breeds">
    </section>

    <hr>

    <!-- ===== CARE: a list ===== -->
    <section id="care">
    </section>

    <hr>

    <!-- ===== ADOPT: an external link ===== -->
    <section id="adopt">
    </section>

    <hr>

    <!-- ===== CONTACT: an email link ===== -->
    <section id="contact">
    </section>

  </main>

Code	What it does
`<main>`	The main content of the page. Use only one.
`<section>`	A themed group of content that will get its own heading.
`id="breeds"`	A unique name for this section. The nav link `href="#breeds"` jumps here. The spelling must match exactly.
`class` vs `id`	A class is a reusable label for styling; many elements can share one. An id is unique: only one element per page can have it.
`<hr>`	A horizontal rule: a thematic break between topics. It has no closing tag. Browsers draw a thin gray line, which you will restyle on Day 2.

Type the footer below </main>, just before </body>.
index.html (below </main>)
```
  
  <footer class="site-footer">
    <p>&copy; 2026 Happy Tails.</p>
  </footer>
```
© is a character entity: a code the browser displays as ©.
Save and check. Your page shows the site name, the tagline, four bulleted links and some gray lines. It looks plain. That is correct: there is no CSS yet.

VS Code tip

If your indentation gets messy, right-click in the file and choose Format Document. Neat indentation makes a missing closing tag easy to spot.