How <base> rewrites relative links
getAttribute gives what you wrote; the href property gives the full URL the browser will really use. Notice the #top link now points at another page.
The head holds information about the page: how to decode it (charset), how to size it on phones (viewport), where relative links point (base), and which styles and scripts to load, and where you place each of them changes how the page behaves.
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 6 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 complete head for a page called Contact us — Green Leaf Café that sets UTF-8, the standard viewport, the title, a one-sentence description and a deferred script /js/contact.js.
A page has <base href="https://shop.example/en/">. What full URLs do cart, /help and ../fr/ resolve to?
Explain it without notes
Which elements are allowed in the head, and what happens if you put a <p> there?
What does width=device-width, initial-scale=1 do, and why should you never add user-scalable=no?
Why does a plain script in the head see null when it looks for an element in the body, and how do you fix it?
What does <base> do, and what is the surprising effect on #fragment links?
Preview
Console
Nothing logged yet.Expected console output
guide.html -> https://example.com/docs/guide.html
../about -> https://example.com/about
#top -> https://example.com/docs/#top