Skip to main content

HTML Structure — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the HTML Structure lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Exercises(5)

  1. 1

    Describe the page for search engines

    easy10 min

    Add a <meta name="description"> tag whose content starts with "Recipes for busy weeknights" — this is the summary search engines show under your page title.

    • Add a description meta tag.
    • Start the content with the given text.
  2. 2

    Build a header with a site name and navigation

    easy10 min

    Add a <header> containing an <h1> with the site name "Daily Brew" and a <nav> with at least two links.

    • Add a <header>.
    • The header h1 should say "Daily Brew".
    • Add at least two navigation links.
  3. 3

    Wrap the primary content in <main>

    easy10 min

    This page's real content is a plain <div>. Change it to a <main> element containing the article text.

    • Wrap the content in <main>.
    • Keep the article text inside main.
  4. 4

    Add a footer with copyright text

    easy10 min

    Add a <footer> containing the exact text "© 2026 Daily Brew" at the end of the page.

    • Add a <footer>.
    • Use the exact copyright text.
  5. 5

    Assemble a full page skeleton

    medium15 min

    Combine what you've learned: a <header> with an <h1>, a <main> with one paragraph, and a <footer> with copyright text — all three, in that order.

    • Add a header with an h1.
    • Add a main with a paragraph.
    • Add a footer.

Find the bug(5)

  1. 1

    Fix the empty description tag

    easy10 min

    The description meta tag exists but its content is empty, so search engines have nothing to show. Set the content to start with "Recipes for busy weeknights".

  2. 2

    Fix the incomplete header

    easy10 min

    The header has navigation but no visible site name, and neither link has a destination. Add an <h1> reading "Daily Brew", then give the links href="/" and href="/blog".

    • Add the site name as an h1.
    • The first link should go to "/".
    • The second link should go to "/blog".
  3. 3

    Fix the missing main landmark

    easy10 min

    The page content sits in a plain <section> with no <main>. Wrap the page's primary content in a <main> element.

    • Add a <main> element.
    • Keep the article text inside main.
  4. 4

    Fix the wrong copyright year

    easy10 min

    The footer shows the wrong year. Correct it to read exactly "© 2026 Daily Brew".

  5. 5

    Fix the page's landmark order

    medium15 min

    The footer, header, and main are in the wrong order. Rearrange them so the header comes first, then main, then the footer — the standard page skeleton order.

    • Keep the header with its h1.
    • Keep the main with its paragraph.
    • Keep the footer.
    • The header should come before the main.
    • The main should come before the footer.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace