Image Links

Any HTML element can be wrapped in an <a> tag to make it a link — including images. Simply place an <img> tag inside an anchor tag. The entire image becomes clickable.

Removing the Image Border

Older browsers displayed a blue border around linked images. In modern HTML5 this border is gone by default, but you may still see it in older browsers or when an image fails to load. Add border: 0 or border: none in CSS (or use border="0" in HTML) to suppress it. Always include a meaningful alt attribute on linked images — screen readers announce the alt text as the link description.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Image Links</title>
  <style>
    a img { border: none; }
    .logo-link img {
      transition: opacity 0.2s;
    }
    .logo-link img:hover { opacity: 0.8; }
  </style>
</head>
<body>
  <h1>Linked Images</h1>

  <!-- Basic image link -->
  <a href="https://example.com">
    <img src="logo.png" alt="Example Company Homepage">
  </a>

  <!-- Hover effect -->
  <a href="/gallery/" class="logo-link">
    <img src="gallery-thumb.jpg"
         alt="View photo gallery"
         width="200" height="150">
  </a>
</body>
</html>

HTML

Full Editor

Pro Tip

Write the alt text of a linked image as if describing the link destination, not just the image — for example, alt="View our product catalogue" is more useful than alt="catalogue cover".

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned