Links and images — the web's basics

Links connect pages. Images display pictures. Both use URL attributes (href / src).

index.html v3.1

<h2>Links</h2>
<a href="https://example.com">External link</a><br>
<a href="/about">Internal link</a><br>
<a href="#section1">Jump to section</a><br>
<a href="mailto:hello@example.com">Email link</a><br>
<a href="tel:+1234567890">Phone link</a>

<h2>Images</h2>
<img src="https://placekitten.com/200/150" alt="A kitten" width="200" height="150">
<img src="https://placekitten.com/100/100" alt="Another kitten" style="border-radius: 50%;">

Live preview updates as you type

🧠 How it works

a (anchor) — link. href is the destination. External: https://example.com — full URL. Internal: /about — absolute path on same domain. Relative: about.html — relative to current page. Anchor: #section1 — jumps to element with id='section1'. mailto: — opens email client. tel: — opens phone dialer (mobile). img — image. src is the URL. alt is REQUIRED (accessibility + SEO). width/height in pixels — set them to prevent layout shift while loading. Always set width/height OR use CSS aspect-ratio to avoid CLS (Cumulative Layout Shift).

✏️ Try these changes

Add target="_blank" to the external link
→ opens in new tab
Change the image src to a different URL
→ different image
Remove the alt attribute from the first image
→ image still shows, but screen readers can't describe it
Add loading="lazy" to the images
→ images only load when scrolled into view (performance)

← Previous lab

Semantic tags — header, nav, main, article, footer

Next lab →