Now rebuild the body with the right elements. Your page so far is three loose tags — a heading, a paragraph, a link. They don't disappear: the heading becomes the hero, the paragraph its intro line, and the single NASA link grows into a real navigation bar. Around them you add the two things a real page needs — a <main> landmark and a gallery of pictures. The code column has the whole file; here is what each part is doing.

A more descriptive title

One line in the <head> grows up too. <title>Cosmos</title> becomes <title>Cosmos — Astronomy Picture of the Day</title> — that's the text a browser puts on the tab, a search engine shows as the result heading, and a reader sees when they bookmark the page. A bare product name tells none of them what the page is; the fuller title does. It's a small edit, but it's semantics as well: the title is the page's name to everything outside the page.

The skip link comes first

<a href="#main-content" class="skip-link">Skip to main content</a>

It's the first element in <body> on purpose — a keyboard user must reach it before anything else. Its href points at #main-content, which is the id you'll put on <main>.

The navigation

<nav class="navbar" aria-label="Main navigation">
  <a href="#home" class="brand">🌌 Cosmos</a>
  <div class="nav-links">
    <a href="#home" class="nav-link active">Home</a>
    <a href="#gallery" class="nav-link">Gallery</a>
  </div>
</nav>

A <nav> landmark holds the site links. Each one is an <a>, because each one goes somewhere — and here each href is an in-page anchor: #gallery jumps to the section with id="gallery" further down, #home back to the top. An anchor to an id is plain HTML; it needs no router and no script. Build a link only for a place that exists — a link to a page you haven't made is exactly the dead control you're learning to avoid, so there's no "Collection" here until there's a collection to show. aria-label="Main navigation" names the landmark, so a screen reader announces "Main navigation" rather than an anonymous region. The current page carries class="nav-link active" — that's how you mark "you are here" statically, with no script.

The main region and the hero

<main id="main-content" tabindex="-1">
  <section aria-label="Home">
    <div class="hero-text">
      <h1>Explore the universe</h1>
      <p class="hero-sub">Every day NASA publishes a photograph…</p>
    </div>
  </section>

Everything that isn't chrome lives inside the one <main>. Its id is the skip link's target; tabindex="-1" lets the browser move focus to it when the skip link fires. Your original heading and paragraph move in here unchanged — same words, now wrapped in a <section> with an accessible name.

The gallery

  <section aria-label="Latest pictures">
    <div class="grid">
      <article class="picture-card">
        <div class="card-header">
          <img src="https://apod.nasa.gov/apod/image/1604/DustAngelNebula_rba1024.jpg"
               alt="A Dust Angel Nebula" loading="lazy">
          <button class="fav-btn" title="Save to collection"
                  aria-label="Save to collection">♡</button>
        </div>
        <div class="card-body">
          <h2>A Dust Angel Nebula</h2>
          <p class="picture-date">2016-04-28</p>
        </div>
      </article>
      <!-- two more cards, same shape -->
    </div>
  </section>
</main>

Each picture is an <article> — a self-contained item that would still make sense on its own. Inside it:

• the <img> carries alt (what the picture shows, for anyone who can't see it) and loading="lazy" (the browser only fetches it when it's about to scroll into view). You'll go deeper on both in the client-side track; here, just get them present and honest.
• the favourite is the real <button> from the last step — focusable, keyboard-operable, and named by aria-label so it isn't announced as just "♡".
• the title is an <h2> and the date a paragraph — structure, not decoration.

Three cards are enough to prove the shape. They stack for now; arranging them into a responsive grid is a later lesson, and that's exactly why the container already has class="grid" waiting for it.

Notice what did not survive: the bare <a href="https://apod.nasa.gov/apod/"> from before is gone — its job is now done by the nav and the cards, so carrying it as a loose link would only be clutter. Removing it on purpose is fine; leaving orphaned tags around "just in case" is how pages rot.