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:hello@example.com">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.
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.