Step 1.6 · Day 1: HTML structure

Add images and alt text

Place your four photos and describe each one for people who can’t see it.

You will work in: index.html

How an image tag works

HTML

<img src="images/beagle.jpg" alt="A tricolor Beagle sniffing the ground on a forest trail">

Code	What it does
`<img>`	Places an image. It has no closing tag.
`src="images/beagle.jpg"`	The source: the path to the file. This is a relative path: “open the `images` folder next to this HTML file, then find `beagle.jpg`.”
`alt="…"`	The alternative text. Screen readers read it aloud, it appears if the image fails to load, and search engines use it. Every image needs one.

Write good alt text

Describe what you actually see in your photo: the dog, what it is doing, and anything important about the setting.
Keep it to one sentence. Don’t start with “image of” or “picture of”; screen readers already say it is an image.
If an image is purely decorative and adds no information, use an empty alt, alt="", so screen readers skip it.

Weak	Strong
`alt="dog"`	`alt="A Golden Retriever sitting on a lawn, smiling with its tongue out"`
`alt="beagle.jpg"`	`alt="A tricolor Beagle sniffing the ground on a forest trail"`
`alt="Picture of a cute dog"`	`alt="A black and white Border Collie leaping to catch a frisbee"`

Add your images

Add the hero image as the first line inside the hero section, above the <h2>.

index.html (inside <section class="hero">)

    <section class="hero">
      <img src="images/hero.jpg" alt="Describe your hero photo here">
      <h2>Every dog deserves a good home.</h2>

Add an image to each card as its first line, above the <h3>.
index.html (inside each <article class="card">)
```
        <article class="card">
          <img src="images/golden-retriever.jpg" alt="Describe your Golden Retriever photo here">
          <h3>Golden Retriever</h3>
```
Do the same for the Beagle card (images/beagle.jpg) and the Border Collie card (images/border-collie.jpg).
Write your alt text. Look at each of your photos and replace every “Describe your … photo here” with your own description.
Credit the photographers in your footer, with a link to where you found the photos.
index.html (inside <footer>)
```
  <footer class="site-footer">
    <p>&copy; 2026 Happy Tails. Photos by Jane Smith, Sam Lee and Ana Ruiz on <a href="https://unsplash.com" target="_blank" rel="noopener">Unsplash</a>.</p>
  </footer>
```
Replace the names with your photographers. If you used Pexels, link to https://www.pexels.com instead.
Save and check. All four photos appear, very large, one above the other. CSS will size them on Day 2.

Broken image icon?

Check that the file is in your images folder and that the name in src matches the real file name exactly, including the .jpg extension and capitalization. A file saved as beagle.jpeg won’t match beagle.jpg.

End of Day 1 checklist

Your ticks are saved in this browser.

The browser tab shows my page title
Every nav link and the button jump to the right section
The Petfinder link opens in a new tab and the email link opens my mail app
All four photos appear, each with my own alt text
There is an <hr> between every section
My code is indented and each section has a comment

Before you leave

Save everything and copy your whole LastnameFirstInitial_dog-site folder to your cloud drive or a USB drive, so you can keep working on Day 2.