Skip to main content

Practical Exercise 10: Links with Images in HTML

Learn to create links with images in HTML easily. This practical exercise teaches you how to use combined <a> and <img> tags to improve the visual navigation of your web pages.

Activity​

Create an HTML document where an image serves as a link.

Interactive Solution​

DivZone ad link Logo
AI PlatformTurn Code into Customers.Try it free

Solution with Complete HTML Code​

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Links with Images</title>
  </head>
  <body>
    <h1>Link with Image</h1>
    <a href="https://div.zone/" target="_blank">
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="Image description"
        width="360"
        height="200"
      />
    </a>
  </body>
</html>

Exercise Variants​

When the image is a link, the same link security rules apply. Add rel and a title for the tooltip.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Secure Image Link</title>
  </head>
  <body>
    <h1>Our Sponsors</h1>
    <a
      href="https://div.zone/"
      target="_blank"
      rel="noopener noreferrer"
      title="Visit DivZone - AI-powered web page generator"
    >
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="DivZone logo, AI-powered web page generator"
        width="360"
        height="200"
      />
    </a>
  </body>
</html>
  • rel="noopener noreferrer": protects against tabnabbing (reinforcement from exercise 3).
  • title: shows a tooltip when the user hovers over the image.
  • alt: describes the image and link destination for screen readers.

Create a gallery where each image links to a different site, with uniform size.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Project Gallery</title>
  </head>
  <body>
    <h1>My Projects</h1>

    <figure>
      <a href="https://div.zone/" target="_blank" rel="noopener noreferrer">
        <img
          src="https://docs.div.zone/img/divzone-social-card.jpg"
          alt="Project 1: DivZone website"
          width="300"
          height="167"
        />
      </a>
      <figcaption>Project 1: DivZone</figcaption>
    </figure>

    <figure>
      <a href="https://github.com" target="_blank" rel="noopener noreferrer">
        <img
          src="https://docs.div.zone/img/divzone-social-card.jpg"
          alt="Project 2: GitHub Profile"
          width="300"
          height="167"
        />
      </a>
      <figcaption>Project 2: GitHub</figcaption>
    </figure>

    <figure>
      <a href="https://developer.mozilla.org/en-US/" target="_blank" rel="noopener noreferrer">
        <img
          src="https://docs.div.zone/img/divzone-social-card.jpg"
          alt="Project 3: Documentation on MDN"
          width="300"
          height="167"
        />
      </a>
      <figcaption>Project 3: MDN Web Docs</figcaption>
    </figure>
  </body>
</html>

The behavior of an image link is identical to that of a text link.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Link Behavior</title>
  </head>
  <body>
    <h1>Target comparison on images</h1>

    <p>Opens in a new tab:</p>
    <a href="https://div.zone/" target="_blank" rel="noopener noreferrer">
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="Link that opens in a new tab"
        width="200"
        height="111"
      />
    </a>

    <p>Opens in the same tab (default behavior):</p>
    <a href="https://div.zone/" target="_self">
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="Link that opens in the same tab"
        width="200"
        height="111"
      />
    </a>
  </body>
</html>

Don't use target="_blank" without rel="noopener noreferrer". Your users' security is as important as the visual design.

Mini-Challenge: Put It to the Test​

Create a project gallery containing:

  • An <h1> with the title "My Web Projects"
  • At least 3 image links, each pointing to a different site
  • All images with descriptive alt, width, and height
  • Each link with target="_blank" and rel="noopener noreferrer"
  • A title on each <a> describing the destination
  • Group each image link with <figure> and add <figcaption>

Try to build it without looking at the previous examples. If you get stuck, go back to the variant you need.

MistakeWhy It's a Problem
Empty alt on images that are linksThe user doesn't know where the link goes. alt should describe the destination, not just the image
Not closing <a> properlyIf </a> is poorly nested, parts of the page become unintentionally clickable
Broken link in hrefIf the URL doesn't exist or is misspelled, the link goes nowhere. Always verify URLs
Forgetting rel="noopener noreferrer"Security vulnerability: the destination page can manipulate your site
Using huge images for small linksThe user downloads unnecessary megabytes. Resize images to actual display size

Frequently Asked Questions​

Yes. The alt of an image link should describe the action or destination of the link, not just the image. For example, instead of alt="DivZone Logo", use alt="Visit the DivZone website". This helps screen reader users understand that the image is clickable and where it leads.

Yes, using the https://wa.me/ protocol in href. Example:

<a href="https://wa.me/14155551234" target="_blank" rel="noopener noreferrer">
  <img src="whatsapp-icon.png" alt="Contact us on WhatsApp" width="64" height="64" />
</a>

This opens a WhatsApp conversation with the specified number. It's a widely used technique on landing pages and commercial sites.

Practice with DivZone AI

Links with images mastered? Create a visual portfolio with DivZone AI where each image is a link to a different section. You'll see how the generator combines <a> and <img> tags in a real project. Learn by doing!