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
Open a new tab safely
easy10 minAdd 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
Use void elements correctly
easy10 minAdd 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
Disable a button with a boolean attribute
easy10 minAdd a "Submit" button that is disabled until the form is valid — give it the disabled attribute.
- 4
Add a tooltip with the title attribute
easy10 minGive the abbreviation "HTML" a title attribute containing "HyperText Markup Language" so hovering shows the full term.
- 5
Combine multiple attributes on one element
medium15 minBuild 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
Fix the unsafe new-tab link
easy10 minThis link opens in a new tab but is missing rel="noopener noreferrer", leaving the original page exposed. Add it.
- 2
Fix the missing void elements
easy10 minThis 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
Fix the misleading disabled attribute
easy10 minThis 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
Fix the garbled tooltip text
easy10 minThe title attribute on this abbreviation is garbled. Fix it to read exactly "HyperText Markup Language".
- 5
Fix the button's mistyped attributes
medium15 minThis 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