🔗 Lesson 6: Links & Images

Creating Links with <a>

The <a> (anchor) element creates a clickable hyperlink. It's one of the most important elements in all of HTML — without it, every page would be a dead end.

<a href="https://www.example.com">Visit Example</a>

Let's break that down:

• <a> — the anchor tag (opening)
• href="..." — the hypertext reference attribute, which tells the browser where the link goes
• Visit Example — the link text (what the user sees and clicks)
• </a> — the closing tag

By default, browsers display links as blue underlined text. After you visit a link, it turns purple. You'll learn how to change this with CSS later.

Email and Phone Links

The href attribute isn't limited to web addresses. You can link to email addresses and phone numbers too:

<!-- Opens the user's email app -->
<a href="mailto:hello@example.com">Send me an email</a>

<!-- Opens the phone dialer on mobile devices -->
<a href="tel:+15551234567">Call us</a>

Linking to Sections on the Same Page

You can link to any element that has an id attribute by using a # followed by the ID:

<!-- The link -->
<a href="#contact">Jump to Contact Section</a>

<!-- Somewhere else on the same page -->
<h2 id="contact">Contact</h2>

Clicking this link scrolls the page down to the element with id="contact". This is how tables of contents work on long pages — including this course!

Absolute vs. Relative URLs

There are two ways to write a URL in the href attribute, and understanding the difference is critical:

Absolute URLs

An absolute URL includes the full address — protocol, domain, and path. It points to the same place no matter where your page is located:

<a href="https://www.wikipedia.org">Wikipedia</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML Docs</a>

Use absolute URLs when linking to external websites — sites that aren't yours.

Relative URLs

A relative URL describes the path relative to the current page. It doesn't include a domain name:

<!-- Links to about.html in the same folder -->
<a href="about.html">About Me</a>

<!-- Links to a file inside a subfolder -->
<a href="pages/contact.html">Contact</a>

<!-- Goes up one folder, then into images -->
<a href="../images/photo.jpg">View Photo</a>

Use relative URLs when linking between pages within your own site. They're shorter, easier to manage, and they keep working even if you move your entire site to a different domain.

Link Targets and Behaviors

By default, clicking a link navigates the current tab to the new page. You can change this behavior with the target attribute:

<!-- Opens in a new tab -->
<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>

The value _blank tells the browser to open the link in a new tab (or new window, depending on the user's settings).

Security with rel="noopener noreferrer"

When you use target="_blank", it's good practice to add a rel attribute for security:

<a href="https://www.example.com"
   target="_blank"
   rel="noopener noreferrer">
    Visit Example
</a>

• noopener prevents the new page from accessing your page's window object (a potential security risk)
• noreferrer prevents the new page from knowing which page sent the user there

Descriptive Link Text

Write link text that makes sense on its own, without reading the surrounding sentence:

<!-- ❌ Bad — "Click here" says nothing about the destination -->
<p>To learn more, <a href="about.html">click here</a>.</p>

<!-- ✅ Good — link text describes what you'll find -->
<p>Learn more on our <a href="about.html">About page</a>.</p>

Screen reader users often navigate by jumping through a list of all links on the page. If every link says "click here," that list is useless. Descriptive link text helps everyone.

Displaying Images with <img>

The <img> element embeds an image on the page. It's a void element (no closing tag), and it requires two attributes:

<img src="images/sunset.jpg" alt="A golden sunset over the ocean">

• src — the source (path or URL to the image file)
• alt — alternative text (describes the image for screen readers and for when the image fails to load)

Image Paths

Just like links, image sources can be absolute or relative:

<!-- Relative: image in an "images" subfolder -->
<img src="images/photo.jpg" alt="My photo">

<!-- Relative: image in the same folder as the HTML file -->
<img src="logo.png" alt="Site logo">

<!-- Absolute: image hosted on another site -->
<img src="https://via.placeholder.com/300x200" alt="Placeholder image">

For your own projects, keep images in a dedicated images/ folder to stay organized.

Setting Image Dimensions

You can specify width and height using attributes (in pixels):

<img src="images/sunset.jpg"
     alt="A golden sunset over the ocean"
     width="600"
     height="400">

Common Image Formats

Writing Good Alt Text

The alt attribute is not optional. It serves three critical purposes:

1. Accessibility: Screen readers read the alt text aloud so visually impaired users know what the image shows
2. Fallback: If the image fails to load (broken link, slow connection), the alt text appears in its place
3. SEO: Search engines can't "see" images — they rely on alt text to understand what's in them

Alt Text Guidelines

<!-- ❌ Bad: empty or unhelpful -->
<img src="photo.jpg" alt="">
<img src="photo.jpg" alt="image">
<img src="photo.jpg" alt="photo.jpg">

<!-- ❌ Bad: too long or redundant -->
<img src="photo.jpg" alt="Image of a photo showing a picture of a sunset">

<!-- ✅ Good: concise and descriptive -->
<img src="photo.jpg" alt="Golden sunset over the Pacific Ocean">

<!-- ✅ Good: describes the function for UI images -->
<img src="search-icon.png" alt="Search">

Images as Links

You can make an image clickable by wrapping an <img> element inside an <a> tag:

<a href="https://www.example.com">
    <img src="images/logo.png" alt="Example Company — visit homepage">
</a>

This is exactly how logo images work on most websites — click the logo and it takes you to the homepage. When an image is a link, make sure the alt text describes where the link goes, not just what the image looks like.

Hands-on Exercise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <a href="about.html">About Me</a> |
    <a href="https://www.wikipedia.org"
       target="_blank"
       rel="noopener noreferrer">Wikipedia</a>

    <h1>Welcome to My Website</h1>

    <img src="images/sunset.jpg"
         alt="A golden sunset over the ocean"
         width="600" height="400">

    <p>This is my first properly structured website.
       I'm learning HTML and CSS from scratch!</p>

    <h2>What I'm Learning</h2>
    <ul>
        <li>HTML structure and tags</li>
        <li>Links and images</li>
        <li>How to connect pages together</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
</head>
<body>
    <a href="index.html">Back to Home</a>

    <h1>About Alex Johnson</h1>
    <p>I'm a <strong>web development student</strong>
       learning to build websites from scratch.</p>

    <h2>My Interests</h2>
    <p>I enjoy drawing, board games, and
       <em>sourdough baking</em>.</p>

    <hr>

    <h2>Contact</h2>
    <p>
        <a href="mailto:alex@example.com">alex@example.com</a>
    </p>
</body>
</html>

Summary

📁 Your Project So Far

my-website/
├── images/
│   └── sunset.jpg     ← your first image
├── index.html         ← homepage with links and image
└── about.html         ← profile page with link back to home

🚀 What's Next?

Your pages have text, headings, links, and images — but content often needs to be organized into lists and tables. In the next lesson, you'll learn how to create ordered lists, unordered lists, definition lists, and structured data tables.