How the browser resolves relative links
new URL(link, page) does exactly what the browser does when you click a relative link.
The <a> element with an href makes a link: to another site (absolute URL), another file on your site (relative path), a spot on the same page (#id), an email or phone number, or a file to download.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a small menu (a <ul> of links) for a site with index.html, about.html and contact.html in the same folder.
You are on docs/guide/install.html. Write links to docs/guide/usage.html, docs/index.html and index.html at the site root (use relative paths, no leading /).
Write a link that opens MDN in a new tab safely and tells the user it will open a new tab.
Explain it without notes
What is the difference between an absolute and a relative URL, and when do you use each?
What does ../ mean in a path?
Why did target="_blank" need rel="noopener", and is it still needed?
Why is "click here" bad link text?
Preview
Console
Nothing logged yet.Expected console output
next.html → https://example.com/blog/2026/next.html
images/cat.png → https://example.com/blog/2026/images/cat.png
../index.html → https://example.com/blog/index.html
../../about.html → https://example.com/about.html
/contact.html → https://example.com/contact.html
#comments → https://example.com/blog/2026/post.html#comments
?page=2 → https://example.com/blog/2026/post.html?page=2