At Level 4 you will connect pages to each other, to other sites, and to email. This topic shows how the
<a> (anchor) element does all three.
The anchor element
A link is made with the <a> (anchor) element. Its href attribute tells the
browser where to go, and the text between the tags is what the visitor clicks:
<a href="…"> - the href is the destination; the link text goes between
the opening and closing tags.
Absolute URLs start with https:// (or http://) and point to a
full address on the web, e.g. https://example.com/page.html.
Relative URLs point to a file relative to the current page, e.g.
about.html (a file in the same folder) or pages/about.html (a file in a
subfolder).
Same-page anchors jump to an element on the same page using #id, e.g.
<a href="#top">Back to top</a>.
target="_blank" opens the link in a new browser tab. Add
rel="noopener" for safety.
mailto: opens the visitor's email app, e.g.
<a href="mailto:hello@example.com">Email me</a>.
Try it: a small set of links
Copy this into index.html and open it in a browser. The first link leaves your site, the
second stays on it, and the third opens your email app:
Clicking "Visit MDN" loads another website, "All topics" reloads this page, and "Email me" opens a new
email addressed to hello@example.com.
Key points
The href attribute holds the destination; the link text goes between the tags.
Relative URLs keep your links working when you move the whole folder - absolute URLs point at one
fixed address.
Use #id to jump within a page, target="_blank" for a new tab, and
mailto: to send email.
Exercises
Exercise 1 - Link two pages together
Preparation: re-read the point about relative URLs above.
Create two files, index.html and about.html, in the
same folder. In each file, add a link that points to the other file using a relative path.
Try it in: your editor (VS Code) - save both files in the
same folder, then open index.html in a browser. Starter: <a href="…">…</a>
Hint 1 - direction
Both pages live in the same folder, so the
href is just the file name - no https:// and no subfolder.
Hint 2 - partial solution
In index.html write
<a href="about.html">About</a>, and in about.html write
<a href="index.html">Home</a>.
Hint 3 - full solution
In index.html:
In about.html:
Check your work: opening index.html shows an "About"
link that opens about.html, and the About page shows a "Back to home" link that returns
you.
Exercise 2 - Add a mailto link
Preparation: re-read the mailto: point above.
On your page, add a link that opens the visitor's email app, pre-addressed to
you@example.com.
Try it in: your editor - clicking it may open a mail app;
that is the expected behaviour.
Hint 1 - direction
The scheme is mailto:, not
https://.
Hint 2 - partial solution
<a href="mailto:you@example.com">Email me</a>.
Hint 3 - full solution
Check your work: clicking the link opens a new email addressed to
you@example.com (your mail app may open automatically).
Exercise 3 - Predict where a relative link points
Preparation: re-read the difference between absolute and
relative URLs.
A page at https://example.com/notes/lesson.html contains
<a href="page2.html">Next</a>. Without clicking, predict the full URL the
browser will load, and explain why.
No code needed - answer in a sentence, then check in a
browser if you like.
Hint 1 - direction
A relative link is resolved against the
current page's folder, not the site's root.
Hint 2 - partial solution
The current page sits in the
/notes/ folder.
Hint 3 - full solution
https://example.com/notes/page2.html.
The browser keeps the current folder (/notes/) and swaps in the new file name
(page2.html).
Check your work: you predicted
/notes/page2.html, not /page2.html.
Exercise 4 - Fix a broken link
Preparation: note that the path in href must match
the real file's location.
The page site/index.html contains <a
href="pages/about.html">About</a>, but the file about.html is saved in
the site/ folder itself, not in a pages/ subfolder. Fix the link and
explain the mistake.
Try it in: your editor - check that the folder in the
href matches where the file really lives (and match the letter case exactly).
Hint 1 - direction
The pages/ part points at a
subfolder that does not exist.
Hint 2 - partial solution
The file is one folder up from where
the link looks - it sits right next to index.html.
Hint 3 - full solution
Drop the wrong pages/ prefix: because about.html sits beside
index.html, the correct relative path is just about.html.
Check your work: after the fix, the link opens the real
about.html in the site/ folder.