Skip to main content

HTML Semantic Layout Tags — exercises and bug fixes

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

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Add a page header

    easy10 min

    Add a header containing a site name.

  2. 2

    Add the main region

    easy10 min

    Wrap the primary content in main.

  3. 3

    Add navigation

    easy10 min

    Add a nav with two links.

  4. 4

    Add a footer

    easy10 min

    Add a footer with copyright text.

  5. 5

    Assemble a full layout

    medium10 min

    Combine header, nav, main and footer.

Find the bug(5)

  1. 1

    Fix the div used as a header

    easy8 min

    The banner region should be a header element.

  2. 2

    Fix the missing main landmark

    easy8 min

    The primary content is not marked as main.

  3. 3

    Fix the navigation list of divs

    easy8 min

    Site navigation belongs in a nav element.

  4. 4

    Fix the footer marked as a section

    easy8 min

    The closing region should be a footer.

  5. 5

    Fix the aside used for main content

    easy8 min

    Primary content should not be an aside.

Ready to write the code?

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

Open the workspace