Loading...
Loading...
Connect pages together with links and add visual content with 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.
<!-- 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 |
<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:
<img src="https://placekitten.com/400/300" alt="A cute kitten">The tag is self-closing — it has no :
<a href="https://example.com">
<img src="button.png" alt="Click here">
</a>Putting an inside an makes the image clickable.
| ❌ Wrong | Why | ✅ Right |
|---|---|---|
| `` without content text | Link exists but nothing to click | `Click here` |
` ` without `alt` | Fails accessibility checks | Always add `alt="description"` |
| ` | ` | ` ` |
| `` instead of ` | Links are for navigation, img is for images | Use ` |
Create a page with:
<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">