Links
Links are what make the web a web — without them, every page would be an isolated island. The anchor tag, <a>, is how HTML creates a link, and understanding exactly how it resolves a URL is one of the most practically important things in this entire course — getting it wrong is one of the most common real-world bugs in deployed websites.
The Anchor Tag
href ("hypertext reference") is the one required attribute — it specifies the destination. Without it, an <a> tag isn't actually a link at all, just plain inline text.
Absolute vs Relative URLs
This is the single most consequential distinction in this chapter — and the difference between a link that works correctly everywhere and one that quietly breaks the moment a site moves or restructures.
https://osztromok.com/linux
Always points to the exact same place, regardless of where the link itself lives — but means the link breaks if the target domain ever changes.
/linux or ../images/photo.jpg
Continues working correctly even if the whole site moves to a new domain — exactly why internal links should almost always be relative.
https://osztromok.com/... for links within osztromok.com itself works, but breaks immediately if the domain or protocol ever changes (exactly the kind of migration covered in the website rebuild courses). Internal links should be relative; absolute URLs are for linking to genuinely different domains.
Linking Within a Page — Fragment Identifiers
A # followed by an element's id (Chapter 1) jumps to that specific element on the page — the basis of "back to top" links and in-page tables of contents.
This same syntax can also follow a full URL to jump directly to a specific section of another page: https://osztromok.com/linux#chapter3.
Key Anchor Attributes
| Attribute | What it does |
|---|---|
| target="_blank" | Opens the link in a new tab/window instead of navigating away from the current page |
| rel="noopener" | A security measure, used alongside target="_blank" — see warning below |
| download | Tells the browser to download the linked file rather than navigate to/display it |
| title | Tooltip text shown on hover — supplementary, not a replacement for clear link text itself |
window.opener — a known security/performance concern. rel="noopener" severs that connection, and modern best practice treats it as required any time target="_blank" is used.
Writing Good Link Text
- Avoid "click here" as link text. Screen reader users often navigate by jumping between links in a list — "click here" repeated multiple times on a page gives zero useful context out of that surrounding context.
- Describe the destination. "Read the full Linux installation guide" tells a user (and a search engine) far more than "click here" or "read more."
- Don't use a raw URL as the visible text unless the URL itself is genuinely the point — it's rarely readable or memorable as link text.
Chapter 4 Quick Reference
- <a href="..."> — href is the one required attribute; without it, not actually a link
- Absolute URL — full address with protocol/domain; use for genuinely external links
- Relative URL — resolved against the current page's location; use for internal links so they survive domain/protocol changes
- #id — jumps to a specific element on the current (or another) page
- target="_blank" — opens in a new tab; always pair with rel="noopener"
- Write descriptive link text — never "click here," describe the actual destination
- Next chapter: images & media — img, alt text, figure/figcaption, basic audio/video