HTML Links — exercises and bug fixes

Build a <nav> containing three links: Home linking to "/", About linking to "/about", and Contact linking to "/contact". Each link's text must match its destination.

• Add a <nav> element.
• Add three links inside the nav.
• The first link should go to "/".
• The second link should go to "/about".

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

• Link to https://developer.mozilla.org.
• Open the link in a new tab with target="_blank".
• Add rel="noopener noreferrer".
• The link text should read "MDN Web Docs".

Add an email link to hello@example.com and a phone link to +1-555-0100. Use the mailto: and tel: URL schemes.

• Add a mailto: link.
• The email link should go to hello@example.com.
• Add a tel: link.

Add a "Skip to content" link before the header that jumps to the #main-content section, so keyboard users can bypass repeated navigation.

• Add a link that reads "Skip to content".
• The link should point to #main-content.
• Keep the #main-content target in place.

Add a link to "/files/handbook.pdf" with the text "Download the handbook" that downloads the file instead of navigating to it, using the download attribute.

• Link to /files/handbook.pdf.
• Add the download attribute.
• The link text should read "Download the handbook".

Link the text "Docs" to https://example.com.

Link "About" to /about.

Add target and the rel that prevents tab-nabbing.

Link "Jump" to the #details anchor.

Link a file and mark it as a download.

This pricing link opens in a new tab but leaves the original page exposed to the new page via window.opener. Add rel="noopener noreferrer" to close the hole.

This link is supposed to open the visitor's email client addressed to support@example.com, but clicking it just navigates the current page. Fix the href.

The "Jump to FAQ" link should scroll to the FAQ section below, but its href doesn't match the section's id. Fix the href so it points at the real id.

• The link should point to #faq.
• Keep the #faq section in place.

This "Terms of Service" link is missing its href entirely, so it isn't focusable or navigable. Give it href="/terms".

This link should open the changelog in a new tab, but a typo in the target attribute makes it open in the current tab instead. Fix the target value.

Without href the anchor is not a link at all.

target="_blank" without rel exposes the opener.

Links use href, not src.

The in-page link is missing its #.

The anchor is empty, so nothing is clickable.