MakeW3web

Image Links

Image links are a combination of images and hyperlinks in HTML. They allow you to use an image as a clickable element to navigate to another web page, resource, or to trigger actions like opening an email client. To create an image link, you simply wrap the `<img>` element with the `<a>` element, using the `href` attribute to specify the target URL.

Here's a basic example of an image link:

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

When the user clicks on the image, they will be taken to "https://www.example.com".

You can also use different link targets with image links, just as you would with text links. For example, to open the link in a new tab, add the `target="_blank"` attribute to the `<a>` element:

<a href="https://www.example.com" target="_blank">
    <img src="images/logo.png" alt="Example Logo">
</a>

To create an email link using an image, use the `mailto:` scheme in the `href` attribute:

<a href="mailto:example@example.com">
    <img src="images/email-icon.png" alt="Email Us">
</a>

Here's a combined example demonstrating various image links:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Links Example</title>
</head>
<body>
    <h1>Image Links</h1>
    
    <p>Basic image link:</p>
    <a href="https://www.example.com">
        <img src="images/logo.png" alt="Example Logo" width="100">
    </a>
    
    <p>Image link with target="_blank":</p>
    <a href="https://www.example.com" target="_blank">
        <img src="images/logo.png" alt="Example Logo" width="100">
    </a>
    
    <p>Email image link:</p>
    <a href="mailto:example@example.com">
        <img src="images/email-icon.png" alt="Email Us" width="50">
    </a>
</body>
</html>

Image links provide a visually engaging way for users to navigate your website or access resources. However, it's essential to include an appropriate `alt` attribute for the `<img>` element to ensure accessibility for users who rely on screen readers or have images disabled in their browsers.

Was this page helpful?