Links & Images

Connect pages together with links and add visual content with images

Links & Images — Connecting and Visualizing

What Are Links & Images?

Two elements make the web "web-like": links () that connect pages together, and images () that add visual content. Without these, every page would be isolated text.

� **Fun fact:** The "a" in `` stands for "anchor" — because it anchors one page to another. The "img" in `` is short for "image."

Syntax

html

<!-- Link (anchor tag) -->
<a href="https://example.com">Click me!</a>

<!-- Image (self-closing tag) -->
<img src="photo.jpg" alt="A description of the photo">

Element	What it does	Key attribute
``	Creates a clickable link	`href` — the URL to go to
``	Displays an image	`src` — the image file path or URL

How It Works

Links (``)

html

<a href="https://google.com">Go to Google</a>
<a href="/about.html">About our site</a>
<a href="mailto:hello@example.com">Email us</a>

The href attribute tells the browser where to go when clicked. It can be:

A **full URL** (`https://...`)

A **relative path** (`/about.html` → same website)

An **email** (`mailto:...`)

A **phone number** (`tel:...`)

� **Key point:** `` is an **inline element** — it flows within your text, not on its own line.

Images (``)

html

<img src="https://placekitten.com/400/300" alt="A cute kitten">

The tag is self-closing — it has no :

`src` — the URL or file path of the image

`alt` — **required!** Text description for accessibility and when images don't load

️ **Always include `alt` text!** It helps screen readers describe images to visually impaired users, and shows up when images fail to load.

Combining Them

html

<a href="https://example.com">
  <img src="button.png" alt="Click here">
</a>

Putting an inside an makes the image clickable.

Why Use Links & Images?

**Navigation** — Links connect your pages into a website

**Content** — Images make pages engaging and informative

**CTA buttons** — "Buy Now", "Learn More", "Subscribe"

**Diagrams & screenshots** — Illustrate concepts visually

Common Mistakes

❌ Wrong	Why	✅ Right
`` without content text	Link exists but nothing to click	`Click here`
`` without `alt`	Fails accessibility checks	Always add `alt="description"`
`photo.jpg`	`` is self-closing, no closing tag	``
`` instead of `` for images	Links are for navigation, img is for images	Use `` for display, `` for navigation

Your Turn!

Create a page with:

An `

` heading: "My Favorite Places"

A paragraph with a link to your favorite website: `"Check out this site"`

An `` of a place you'd like to visit (use any image URL and alt text)

💡Need a hint? (3 available)

#1Links use <a> with href attribute — don't forget the content between tags!

#2Images use <img> with src and alt — it's self-closing (no </img>)

#3You can use any image URL for the src

🔑Show solution (try it yourself first!)

<h1>My Favorite Places</h1>
<p>Check out <a href="https://nationalgeographic.com">National Geographic</a></p>
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600" alt="A beautiful mountain landscape">

🌐 HTML Editor

🖼️ Live Preview

← Build a Landing Page Next: The Box Model →