Links, Images & Media
Links — the backbone of the web
The
<a> (anchor) tag creates hyperlinks. Without links, the web would just be a collection of isolated pages.HTML
<a href="https://example.com">Visit Example</a>Absolute vs relative URLs
Absolute — the full URL including protocol:
HTML
<a href="https://example.com/about">About</a>Relative — relative to the current page:
HTML
<a href="/about">About</a> <!-- from root -->
<a href="contact.html">Contact</a> <!-- same directory -->
<a href="../index.html">Home</a> <!-- parent directory -->Opening links in a new tab
HTML
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
External site
</a>Always add
rel="noopener noreferrer" when using target="_blank" — it prevents the new page from accessing your page's window object (a security concern).Linking to sections on the same page
Give any element an
id, then link to it with #:HTML
<h2 id="pricing">Pricing</h2>
<!-- Somewhere else on the page -->
<a href="#pricing">Jump to pricing</a>Email and phone links
HTML
<a href="mailto:[email protected]">Email us</a>
<a href="tel:+1234567890">Call us</a>Images
The
<img> tag embeds images. It's self-closing — no closing tag needed.HTML
<img src="photo.jpg" alt="A sunset over mountains" width="600" height="400" />The alt attribute is not optional
The
alt text serves three purposes:- Accessibility — screen readers read it aloud for visually impaired users.
- Fallback — it shows if the image fails to load.
- SEO — search engines use it to understand image content.
alt text that describes what the image shows, not what it is:HTML
<!-- Bad -->
<img src="photo.jpg" alt="image" />
<!-- Good -->
<img src="photo.jpg" alt="A golden retriever playing fetch in a park" />For purely decorative images, use an empty alt:
alt="".Responsive images
Use
srcset to serve different image sizes based on screen width:HTML
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Landscape photo"
/>The browser picks the best image automatically — smaller screens get smaller files.
Video and audio
HTML5 has native media elements:
HTML
<video controls width="640">
<source src="video.mp4" type="video/mp4" />
Your browser doesn't support video.
</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg" />
Your browser doesn't support audio.
</audio>The
controls attribute adds play/pause buttons. Without it, the media is invisible.Embedding external content
Use
<iframe> to embed other websites (YouTube videos, maps, etc.):HTML
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
width="560"
height="315"
title="Video title"
allowfullscreen
></iframe>Be cautious with iframes — they load an entire page inside yours, which can slow things down and introduce security risks.
The picture element for art direction
When you need different cropping or sources (not just resolution), use
<picture>:HTML
<picture>
<source media="(min-width: 800px)" srcset="hero-wide.webp" />
<source media="(min-width: 400px)" srcset="hero-medium.webp" />
<img src="hero-mobile.webp" alt="Product on a desk" width="800" height="450" />
</picture>The browser picks the first matching
<source>, then falls back to <img>. Always keep a final <img> with alt for accessibility.Figure and figcaption
Wrap images with captions in semantic markup:
HTML
<figure>
<img src="chart.png" alt="Bar chart showing 40% growth in Q1" />
<figcaption>Revenue grew 40% year over year in Q1 2026.</figcaption>
</figure>Screen readers associate the caption with the image, and search engines gain extra context.
Download links and security
Force a download instead of navigation with the
download attribute:HTML
<a href="/files/guide.pdf" download>Download the guide (PDF)</a>For user-generated or untrusted URLs, never pass them straight into
href without validation — that can enable phishing or script injection in older browsers.Performance tips
- Prefer modern formats (WebP or AVIF) with JPEG/PNG fallbacks when needed.
- Always set
widthandheighton images (or use CSSaspect-ratio) to prevent layout shift while loading. - Lazy-load below-the-fold images with
loading="lazy". - Compress large media files; video posters and multiple
srcsetwidths beat shipping one giant asset to every device.
Writing link text that helps everyone
Link text should describe the destination, not the mechanics of clicking. Phrases like "click here" or "read more" make sense visually but fail out of context — screen reader users often pull up a list of all links on a page and hear nothing useful. Prefer "Read our pricing guide" over "Click here for pricing."
For images used as links, the
alt text becomes the link name, so it must describe where the link goes: alt="Company careers page" rather than alt="logo". External links that open new tabs should still announce their purpose in the link text when possible, or rely on visible cues plus aria-label when space is tight.Media accessibility beyond alt text
Videos should include captions or transcripts for deaf and hard-of-hearing users. The
<track kind="captions"> element inside <video> points to a WebVTT caption file. Audio-only content benefits from a written transcript linked nearby. Autoplaying media with sound is disruptive — if you must autoplay, mute by default and let the user unmute deliberately.Key takeaway
Links and images are fundamental. Always use descriptive
alt text on images, use rel="noopener noreferrer" on external links, and consider responsive images for performance.