Links, images & media, the things that make HTML hypertext.

Section · 01

The anchor tag

Hyperlinks — the thing that makes the web a web — are one tag: <a> (anchor). The required attribute is href (the destination).

<a href="https://yorksims.com">YorkSims</a>
<a href="/about">About</a>
<a href="contact.html">Contact</a>
<a href="#section-2">Jump to section 2</a>
<a href="mailto:hi@example.com">Email me</a>
<a href="tel:+15555551234">Call me</a>

Section · 02

Absolute vs relative URLs

Absolute URLs include the whole thing — scheme, domain, path. Relative URLs are interpreted relative to the current page.

Absolute:    https://yorksims.com/about
Root-relative: /about              → start at the site root
Page-relative: about.html          → relative to the current file
Page-up:       ../about.html       → up one folder
Anchor:        #pricing            → same page, scroll to id="pricing"

Rule of thumb: use root-relative (/about) for internal links and absolute (https://...) for external. Page-relative gets weird as soon as your URL structure changes.

Section · 03

Useful anchor attributes

<a href="https://twitter.com/yorksims"
   target="_blank"
   rel="noopener noreferrer">
  Twitter
</a>

target="_blank"

Opens the link in a new tab. Use sparingly — research shows users actually hate this for normal navigation. Use it for external links where you want users to stay on your site, or for tools where they need both windows.

rel="noopener noreferrer"

Always pair this with target="_blank" on external links. Without it, the new tab can use a JavaScript back-channel to read parts of your origin page. Security 101.

download

Tells the browser to download the file rather than navigate to it. Useful for PDFs, ZIPs, anything that’s an artifact rather than a page.

Section · 04

Images — the basics

One tag, two required attributes:

<img src="/photos/desk.jpg" alt="A clean desk with a laptop and coffee" />

The alt attribute

altis the text alternative for the image. It shows up when the image fails to load, and is read aloud by screen readers. Don’t skip it. Don’t write alt="image"— that’s useless. Write what the image conveys.

Bad:    <img src="logo.png" alt="logo" />
Good:   <img src="logo.png" alt="YorkSims logo" />

Decorative image (purely visual, no info):  <img src="line.svg" alt="" />

Yes, empty alt=""is correct for decorative images — it tells the screen reader to skip it entirely. Missing alt vs empty alt aren’t the same thing.

Section · 05

Raster vs vector — pick the right format

Raster (pixel grids):
  JPG    — photos, lots of color, lossy compression
  PNG    — anything with transparency or sharp edges, lossless
  WebP   — modern, smaller than JPG/PNG, excellent support
  AVIF   — even newer, even smaller, 2026 support is solid
  GIF    — legacy, animated; use video instead

Vector (math):
  SVG    — logos, icons, simple illustrations — scales infinitely

Default to WebP for photos and SVG for icons. JPG is fine as a fallback but it’s a 1990s format. PNG only when you need transparency.

Section · 06

Responsive images — srcset and sizes

Sending a 4000px-wide image to a phone is a waste. The browser’s srcset attribute lets you offer multiple resolutions and let the browser pick.

<img
  src="desk-800.jpg"
  srcset="desk-400.jpg 400w, desk-800.jpg 800w, desk-1600.jpg 1600w"
  sizes="(min-width: 768px) 800px, 100vw"
  alt="A clean desk with a laptop and coffee"
/>

That says: I have three sizes of this image, here are their widths; at screens 768px and wider I’ll display this at 800px wide, otherwise full viewport. The browser fetches the one it needs and ignores the others.

Most modern frameworks (Next.js, Astro) have an <Image> component that generates all of this for you. Use it.

Section · 07

Video and audio

<video controls width="640">
  <source src="trailer.webm" type="video/webm" />
  <source src="trailer.mp4"  type="video/mp4"  />
  Your browser doesn't support video.
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg" />
</audio>

You provide multiple <source> tags so the browser can pick the format it can play. Common attributes: controls (show play/pause UI), autoplay muted playsinline (for background videos — muted is required by most browsers to autoplay), loop, poster="thumb.jpg" (placeholder frame).

For anything beyond “play this file,” reach for a hosted service (YouTube, Vimeo, Mux, Cloudflare Stream) rather than self-hosting. Streaming, adaptive bitrate, and analytics are not problems you want to solve from scratch.