Skip to main content

HTML Elements & Attributes — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the HTML Elements & Attributes 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

    Open a new tab safely

    easy10 min

    Add a link with the text "Open documentation" pointing to https://developer.mozilla.org that opens in a new tab. Because it opens a new tab, protect the original page with rel="noopener noreferrer".

    • Open the link in a new tab.
    • Add rel="noopener noreferrer" for security.
  2. 2

    Use void elements correctly

    easy10 min

    Add a horizontal rule to separate two sections, and use a line break inside the second paragraph to put an address on its own line.

    • Add an <hr> between the sections.
    • Add a <br> inside the address paragraph.
  3. 3

    Disable a button with a boolean attribute

    easy10 min

    Add a "Submit" button that is disabled until the form is valid — give it the disabled attribute.

  4. 4

    Add a tooltip with the title attribute

    easy10 min

    Give the abbreviation "HTML" a title attribute containing "HyperText Markup Language" so hovering shows the full term.

  5. 5

    Combine multiple attributes on one element

    medium15 min

    Build a submit button with three attributes: type="submit", id="submit-btn", and class="btn-primary".

    • Set type="submit".
    • Set id="submit-btn".
    • Set class="btn-primary".

Find the bug(5)

  1. 1

    Fix the unsafe new-tab link

    easy10 min

    This link opens in a new tab but is missing rel="noopener noreferrer", leaving the original page exposed. Add it.

  2. 2

    Fix the missing void elements

    easy10 min

    This page has no thematic break between the two sections, and the address runs onto one line. Add an <hr> between the paragraphs, and a <br> inside the address to put the city on its own line.

    • Add an <hr> between the sections.
    • Add a <br> inside the address paragraph.
  3. 3

    Fix the misleading disabled attribute

    easy10 min

    This button uses disabled="false", but any value — even "false" — still makes a boolean attribute true. Remove the ="false" so the attribute reads as a clean, valueless disabled.

  4. 4

    Fix the garbled tooltip text

    easy10 min

    The title attribute on this abbreviation is garbled. Fix it to read exactly "HyperText Markup Language".

  5. 5

    Fix the button's mistyped attributes

    medium15 min

    This button's id and class values have typos. Fix id to "submit-btn" and class to "btn-primary".

    • Fix id to "submit-btn".
    • Fix class to "btn-primary".

Ready to write the code?

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

Open the workspace