Theory
One click and they are gone
FestConnect's home page lists events. Each name links to that event's page, and a footer links to the main college website. A student clicks 'Robotics', reads it, hits back, clicks the college link to check the address, and now the fest tab is replaced by the college site. They never come back to register.
Two small decisions on the link tag fix this: where does it point (the href) and where does it open (the target).
Theory
An address and a door
A link is a signpost with two settings.
The address (href) is either a full postal address that works from anywhere (absolute) or 'the room next door' directions that only make sense from here (relative).
The door (target) is whether the signpost opens the destination in the same room you are standing in (_self) or in a brand new room while leaving this one intact (_blank).
Theory
href: absolute vs relative
The href attribute holds the destination:
- Absolute URL: the complete address,
https://college.edu/index.html. Use it to point to another site. - Relative URL: a path from the current page, like
dance.html(same folder),events/dance.html(subfolder), or../index.html(up one folder). Use it to point within your own site.
Relative links move with the site: zip the whole folder, upload it to a server, and they still work, because they never mention the domain.
Practical
FestConnect links
<!-- relative: another page in our own site, opens in same tab -->
<a href="events/dance.html">Dance Night</a>
<!-- relative, up one folder then into home -->
<a href="../index.html">Back to Fest Home</a>
<!-- absolute: an outside site, open a NEW tab so we keep FestConnect -->
<a href="https://college.edu" target="_blank" rel="noopener noreferrer">
College Website
</a>This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
The four target values
| target | Opens the link in |
|---|---|
| _self | the same tab (this is the default) |
| _blank | a new tab or window |
| _parent | the parent frame (inside framesets/iframes) |
| _top | the full window, breaking out of all frames |
Think first
Same tab or new?
For the outside 'College Website' link you want the FestConnect tab to survive. For the internal 'Dance Night' link you want normal navigation. Which target does each need, and which one is the default you can leave off?
Show the answer
'College Website' needs target="_blank" so it opens in a new tab and leaves FestConnect open. 'Dance Night' needs _self, which is the default, so you write no target at all. Rule of thumb: external links get _blank; internal navigation stays _self.
Quiz
You move the whole FestConnect folder onto the college server under a new domain. Which links keep working with no edits?
- The relative ones (dance.html, ../index.html)
- The absolute ones pointing to your own old domain
- Only links that use target="_blank"
- None: every link must be rewritten after a move
Show the answer
The relative ones (dance.html, ../index.html)
Relative URLs describe paths inside your own folder, so they survive any move (A). Absolute URLs that named the old domain (B) now point at the wrong place. target (C) controls where a link opens, not whether it works. So a move does not break everything (D), only the absolute self-links, which is exactly why you prefer relative URLs for your own pages.
Watch out
The traps examiners set
1. The default target is `_self`, not _blank. If a question shows a link with no target and asks where it opens, the answer is the same tab.
2. _parent and _top only matter inside frames/iframes. On a normal page they behave like _self. Do not claim _top 'always opens a new tab', it does not.
3. When you use _blank, add rel="noopener noreferrer": it stops the new page from tampering with yours. This is a real-world security habit examiners increasingly expect.
Theory
You will link the form here too
In a few lessons the registration <form> will send data to a page named in its action attribute, and that path follows the exact same absolute-vs-relative rule you just learned. Getting comfortable with relative paths now pays off across forms, images (src), and stylesheets (href on <link>), which all point at files the same way.
Summary
Key takeaways
- <a href="..."> holds the destination; the target attribute holds where it opens.
- Absolute URL = full address (https://...) for other sites; relative URL = a path (dance.html, ../index.html) within your own site.
- Relative links survive moving the site; absolute self-links break if the domain changes.
- target: _self (same tab, the default), _blank (new tab), _parent and _top (only meaningful in frames).
- Pair target="_blank" with rel="noopener noreferrer" for safety.
- Memory hook: an address (href) and a door (target).