Links and Images in Depth

Go beyond <a href="...">. Learn safe targets, accessible image patterns, responsive images with srcset, and figure/figcaption for captions.

linkimagesrcsetfigurealt

Duration

⏱ About 1 hour

Level

📊 Beginner

Prerequisite

🎯 html-01

OUTCOME

Build properly-attributed external links and responsive, captioned images

What you'll learn

1Use href, target, and rel correctly
2Write alt text that actually helps
3Serve responsive images with srcset and sizes
4Caption images with <figure> + <figcaption>

1. Anchor Tag Anatomy

html

<!-- Internal link -->
<a href="/about">About</a>

<!-- External link, open in new tab safely -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External
</a>

<!-- Email and phone -->
<a href="mailto:hello@example.com">hello@example.com</a>
<a href="tel:+821012345678">+82 10-1234-5678</a>

<!-- In-page jump -->
<a href="#section-2">Jump to Section 2</a>

⚠️

Always pair target="_blank" with rel="noopener noreferrer" — it prevents the new tab from accessing window.opener (security) and avoids referrer leaks.

2. Image Basics

html

<img src="hero.jpg"
     alt="A panoramic photo of the city skyline at sunset"
     width="1200" height="600"
     loading="lazy">

alt — describe the meaning of the image (leave empty alt="" for purely decorative)
width/height — reserve layout space (prevents content jumps)
loading="lazy" — defer below-the-fold images for faster page loads

3. Responsive Images

html

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1600.jpg 1600w"
     sizes="(min-width: 768px) 50vw, 100vw"
     alt="Mountain landscape">

The browser picks the smallest source that meets the display size — saves bandwidth on mobile.

4. Captioned Figures

html

<figure>
  <img src="chart.png" alt="Bar chart showing 2024 revenue by quarter">
  <figcaption>Figure 1. 2024 quarterly revenue ($M).</figcaption>
</figure>

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗