HTML — Links

Links are the whole point of the web

The "HT" in HTML — HyperText — means text that links to other text. The <a> tag ("anchor") creates those links:

<a href="https://example.com">Visit Example</a>

What the browser displays

<ins>Visit Example</ins> (blue underlined text; clicking navigates to example.com)

Anatomy:

<a href="https://example.com">Visit Example</a>
 │        └────┬─────┘         └────┬───┘
 │          destination          clickable text
 └── "anchor" element

The href attribute holds the destination; the text between the tags is what people click and see.

Absolute vs relative URLs

Absolute — full address, works from anywhere

<a href="https://wikipedia.org">Wikipedia</a>
<a href="https://developer.mozilla.org/en-US/">MDN docs</a>

Always includes the protocol (https://). Use for external sites.

Relative — path relative to the current page

<a href="about.html">About</a>              <!-- same folder -->
<a href="blog/post.html">Blog post</a>      <!-- subfolder -->
<a href="../index.html">Back to home</a>    <!-- parent folder -->
<a href="/">Site root</a>

Symbol	Meaning
about.html	In the same folder
folder/page.html	Inside a subfolder
../	Go up one level
../../	Go up two levels

Use relative URLs inside your own site: they keep working when you rename domains or move folders.

Opening links in new tabs

<a href="https://example.com" target="_blank">Opens in a new tab</a>

Add rel="noopener" alongside — it's a security best practice preventing the opened page from manipulating yours:

<a href="https://example.com" target="_blank" rel="noopener">Safe new-tab link</a>

When to use new tabs:

• ✅ External references you don't want to leave behind
• ❌ Internal navigation — surprising users with tab explosions is hostile UX

Linking within the same page

Give any element an id, then link to #id:

<nav>
    <a href="#intro">Introduction</a>
    <a href="#setup">Setup</a>
    <a href="#faq">FAQ</a>
</nav>

<h2 id="intro">Introduction</h2>
<p>...</p>

<h2 id="setup">Setup</h2>
<p>...</p>

<h2 id="faq">FAQ</h2>
<p>...</p>

Clicking a nav item scrolls instantly to that section — no JavaScript required. Long documentation pages live on this feature.

The special fragment #top plus a link at the bottom makes a classic back-to-top control:

<footer>
    <a href="#top">Back to top ↑</a>
</footer>

A bare href="#" is an old placeholder meaning "go nowhere" — avoid it; use a <button> if clicking shouldn't navigate.

Other link types

Email

<a href="mailto:hello@example.com">Email us</a>

Clicking opens the visitor's mail client with the address pre-filled. You can even pre-fill subject and body:

<a href="mailto:hello@example.com?subject=Feedback&body=Hi team,">
    Send feedback
</a>

Phone (great on mobile)

<a href="tel:+15551234567">Call (555) 123-4567</a>

On phones this dials directly; on desktops it opens calling apps.

File downloads

<a href="report.pdf" download>Download the report</a>
<a href="invoice.pdf" download="my-invoice.pdf">Download (renamed)</a>

The download attribute saves instead of navigating.

Link states — why links change appearance

Browsers style links differently depending on their history/state:

State	Default look
Unvisited	Blue + underline
Visited	Purple + underline
Hover	Underlined (cursor changes)
Active (being clicked)	Red flash

You can restyle all of these with CSS pseudo-classes later (a:hover, a:visited…). For now, know that purple links aren't broken — they're history.

Writing good link text

Link text should make sense out of context — screen-reader users often browse by a list of links alone:

<!-- Bad: tells nothing -->
<p>To learn more, <a href="docs.html">click here</a>.</p>

<!-- Good: destination is described -->
<p>Read the <a href="docs.html">full installation guide</a>.</p>

Never write "click here". It's redundant (links already look clickable), uninformative to assistive tech, and terrible for SEO.

Image links (combining elements)

Any content can live inside an anchor:

<a href="gallery.html">
    <img src="thumb.jpg" alt="Photo gallery thumbnail">
</a>

Now the image itself is clickable. Browsers draw a border/outline around linked images by default; CSS usually removes it.

Common mistakes checklist

1. Missing protocol: href="www.google.com" treats it as a local file name. Write https://www.google.com.
2. Spaces in file names: href="my page.html" breaks — use my-page.html.
3. Empty href="#" as fake buttons — use real buttons.
4. "Click here" text — describe the destination instead.
5. Forgetting rel="noopener" with target="_blank".

Mini Practice

Build hub.html:

1. Three external links opening in new tabs with rel="noopener"
2. A mini table of contents linking to three sections via id
3. A mailto: link with a pre-filled subject
4. One link wrapping a small image
5. Rewrite any "click here" into descriptive link text

Test every link — a hub of dead links is worse than no hub.

Next: images →