Lesson 3: Links & images

What you'll learn

• How to use <a> links
• How to use <img> with src and alt
• Make images responsive with CSS

Explain like I'm 10

Links are like doors. Images are like stickers on your page.

<a href="https://example.com">Go to example.com</a>
<img src="https://placekitten.com/400/240" alt="A cute kitten">

Try it

1. Change the link text.
2. Swap the image URL to a different size.

Links — anchors and URLs

Use <a href="..."> to create links. URLs can be absolute (start with https://) or relative (path from the current file).

<!-- internal link -->
<a href="/lessons/html-lesson-01.html">Go to Lesson 1</a>

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

When using target="_blank", always add rel="noopener noreferrer" to prevent the opened page from accessing your page via window.opener.

Images — src and alt

Use <img src="..." alt="...">. The alt attribute provides alternative text for screen readers and shows if the image fails to load.

<img src="images/photo.jpg" alt="Portrait of a smiling student">

<figure>
  <img src="https://placekitten.com/640/360" alt="A sleepy kitten">
  <figcaption>A kitten I found online</figcaption>
</figure>

Use full URLs for external images (e.g. https://...) or relative paths for local files (./images/photo.jpg or images/photo.jpg).

File path examples

• ./images/photo.jpg — same folder as the HTML file.
• images/photo.jpg — subfolder named images.
• /images/photo.jpg — root-relative path from the website root.
• https://site.com/images/photo.jpg — absolute external URL.

Styling links and images

Use CSS to style hover and focus states for links, and make images responsive with max-width and height:auto.

a { color: #0b61a4; text-decoration: none; }