The anatomy of a link

A link is an anchor — the <a> tag. The href attribute (“hypertext reference”) says where it goes; the text between the tags is what the user sees and clicks.

Five kinds of links

The same <a> tag does five different jobs, depending on the href:

Pre-fill the subject & body of an email link

A plain mailto: just opens a blank email. You can pre-fill the subject, body, and even cc/bcc by adding them after a ? — the first one starts with ?, and each extra one is joined with &.

<a href="mailto:hello@example.com?subject=Website%20question&body=Hi%20Dr.%20G,">Email me</a>

Add cc and bcc the same way:
href="mailto:hello@example.com?cc=team@example.com&bcc=boss@example.com&subject=Hi"

Relative vs absolute paths

For links and media inside your own site, the path tells the browser how to find the file relative to the current page.

Folder structure:
my-site/
├─ index.html
├─ about.html
├─ images/
│   └─ logo.png
└─ blog/
    └─ post.html

From index.html:
href="about.html"          same folder
src="images/logo.png"     into a subfolder
href="blog/post.html"

From blog/post.html, to get back out:
href="../about.html"        ../ = go up one folder
src="../images/logo.png"

Opening links in a new tab — safely

target="_blank" opens a link in a new tab. When you do, also add rel="noopener noreferrer" — without it, the new page can script your original tab (a security risk) and gets referrer info.

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

Link states & writing good link text

Links have four states you can style. The focus ring (for keyboard users) is the one people forget — never remove it.

a         { color: #2563eb; }
a:visited { color: #7c3aed; }
a:hover   { text-decoration: underline; }
a:focus-visible { outline: 3px solid #93c5fd; }   keyboard focus ring

Write link text that makes sense on its own

To read the report,
<a href="report.pdf">click here</a>.

<a href="/sale">Read more</a>

Read the
<a href="report.pdf">2026 annual report (PDF)</a>.

<a href="/sale">See this week's sale</a>

Audio

The <audio> element plays sound with built-in controls — one tag, no JavaScript. Press play.

<audio controls preload="none">
  <source src="clip.mp3" type="audio/mpeg">
  <source src="clip.ogg" type="audio/ogg">
  Your browser doesn't support audio.
</audio>

Video

The <video> element gives you play/pause, scrubber, volume, and fullscreen. Add a poster so something shows before play. Press play.

<video controls preload="none" poster="thumb.jpg">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en">
</video>

Embeds & iframes

An <iframe> drops another page inside yours — a YouTube video, a Google Map, a form. Wrap it in a 16:9 box so it scales responsively.

.embed { position: relative; aspect-ratio: 16 / 9; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

<iframe src="https://www.youtube.com/embed/VIDEO_ID"
        title="Embedded video" loading="lazy" allowfullscreen></iframe>

Accessibility recap

• Descriptive link text — never “click here.”
• Keep the focus ring so keyboard users can see where they are.
• Warn about new tabs and non-HTML targets (“(PDF),” “opens in new tab”).
• Caption your videos with a <track>, and provide transcripts for audio.
• Title every <iframe> so its purpose is announced.
• Don't autoplay sound — let people choose to play.

Links & media checklist

• Every link has a clear href and descriptive text
• Internal links use relative paths; external links use full https:// URLs
• target="_blank" always paired with rel="noopener noreferrer"
• The keyboard focus ring is visible (not removed)
• <audio>/<video> have controls; video has a poster and captions
• Embeds are in a responsive 16:9 wrapper with a title
• Nothing autoplays with sound

Everything on one page

Here's one small page that uses every kind of link and every media element from this lesson — a workshop resources page. First the rendered result, then the exact code below. See how many link types you can spot.

The rendered page

The code (styling omitted so the links & media stand out)

<header>
  <h1>Workshop Resources</h1>
  <nav aria-label="Primary">
    <a href="#reading">Reading</a>        <!-- jump to a spot on the page -->
    <a href="#contact">Contact</a>
    <a href="#media">Media</a>
  </nav>
</header>

<main>
  <section id="reading">
    <h2>Reading list</h2>
    <p>Start with the official docs on
      <!-- external link, new tab, done safely -->
      <a href="https://developer.mozilla.org"
         target="_blank" rel="noopener noreferrer">MDN Web Docs ↗</a>.
      Then review our
      <a href="about.html">About page</a>        <!-- relative link -->
      and jump to the
      <a href="#media">media samples below</a>.</p>

    <!-- download link -->
    <p><a href="syllabus.pdf" download>Download the syllabus (PDF)</a></p>
  </section>

  <section id="contact">
    <h2>Get in touch</h2>
    <ul>
      <li>Email:
        <a href="mailto:hello@example.com?subject=Workshop%20question">hello@example.com</a></li>
      <li>Call: <a href="tel:+15551234567">(555) 123-4567</a></li>
      <li>Text: <a href="sms:+15551234567">Send a text</a></li>
    </ul>

    <!-- an image wrapped in a link -->
    <p>
      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
        <img src="logo.png" alt="Example company logo"> Visit our site
      </a>
    </p>
  </section>

  <section id="media">
    <h2>Media samples</h2>

    <h3>Audio</h3>
    <audio controls preload="none">
      <source src="clip.mp3" type="audio/mpeg">
      Your browser doesn't support audio.
    </audio>

    <h3>Video</h3>
    <video controls preload="none" poster="thumb.jpg">
      <source src="movie.mp4" type="video/mp4">
      <track kind="captions" src="captions.vtt" srclang="en">
      Your browser doesn't support video.
    </video>

    <h3>Embedded video (iframe)</h3>
    <div class="embed">
      <iframe src="https://www.youtube.com/embed/VIDEO_ID"
              title="Embedded sample video"
              loading="lazy" allowfullscreen></iframe>
    </div>
  </section>
</main>

<footer>
  <p>Back to <a href="#top">top</a> · © 2026 Workshop</p>
</footer>

Keep going