How do I add a link to an image in HTML?

To add a link to an image in HTML, you wrap the <img> tag inside an <a> (anchor) tag. This makes the image clickable and directs the user to the specified URL when clicked.

Here's how you do it:

<a href="https://www.example.com">
  <img src="image.jpg" alt="Description of the image">
</a>

Let's break this down:

• <a> tag (Anchor tag): This tag defines a hyperlink. The href attribute specifies the URL that the link points to.
• href="https://www.example.com": This attribute within the <a> tag specifies the destination URL. Replace "https://www.example.com" with the actual URL you want the image to link to.
• <img> tag (Image tag): This tag displays an image on the webpage.
• src="image.jpg": This attribute within the <img> tag specifies the path to the image file. Replace "image.jpg" with the actual path to your image file.
• alt="Description of the image": This attribute within the <img> tag provides alternative text for the image. It's important for accessibility and SEO. Describe the image concisely.

Example with Attributes:

You can also add other attributes to the <a> tag, such as target="_blank" to open the link in a new tab:

<a href="https://www.example.com" target="_blank">
  <img src="image.jpg" alt="Description of the image">
</a>

In this example, target="_blank" ensures that when the user clicks the image, the linked website opens in a new tab or window, rather than replacing the current page.

Summary:

By placing the <img> tag inside the <a> tag, you effectively create a clickable image link. The href attribute of the <a> tag determines the destination URL, and the src attribute of the <img> tag specifies the image to be displayed. Remember to use the alt attribute for accessibility.