How to Turn an Image into a Link in HTML? (original) (raw)

Last Updated : 23 Jul, 2025

Turning an image into a clickable link in HTML is a simple process that can enhance user interaction on your website. By wrapping an image inside an anchor tag (), you can make it clickable and redirect users to a different page or website.

• It allows any image to be a clickable link.
• Simple HTML structure with minimal code.
• Supports linking to both external URLs and internal pages.
• Can be styled using CSS for better presentation.

**1. Redirecting to a Specific Page

To turn an image into a link in HTML, wrap the <img> tag inside an <a> tag. This makes the image clickable, and it will redirect to a specific page.

**Syntax:

**Now, let us understand with the help of the example:

HTML `

Click on GeeksforGeeks logo to Redirect into geeksforgeeks.org

`

**Output

**In this example:

• The entire content of the page is centered using the style="text-align: center;" applied to the tag.
• There’s a heading (

  ) that informs the user to click on the GeeksforGeeks logo to visit their website.

• The GeeksforGeeks logo () is wrapped inside an anchor () tag, which makes the image clickable. Clicking the image will redirect users to GeeksforGeeks' website.
• The logo is loaded from an external URL (src attribute), and the alt attribute provides a description of the image for accessibility.

**2. Opening the Link in a New Tab

By default, clicking the image link will open the destination URL in the same browser window. If you want to open the link in a new tab, you can use the target="_blank" attribute.

**Now, let us understand with the help of the example:

HTML `

Click on the styled logo to visit GeeksforGeeks

`

**Output

**In this example:

• The page has centered text, a light gray background (#f4f4f4), and a heading (

  ) with dark text (#333).

• The element, with an ID of "logo", is placed inside an anchor () tag. This makes the image clickable, redirecting users to GeeksforGeeks' website when clicked.
• The target="_blank" in the anchor () tag ensures that the link opens in a new browser tab, allowing users to keep the current page open.
• On hover, the image scales (zooms) by 1.2 times its original size, providing an interactive visual effect.

Best Practices

• **Use Descriptive Alt Text: Always provide a meaningful description in the alt attribute to ensure accessibility for screen readers and improve SEO.
• **Ensure Clickability: Make sure the image is appropriately sized to be easily clickable, and add enough padding if needed.
• **Add Accessibility Features: Consider adding ARIA (Accessible Rich Internet Applications) roles or labels to improve accessibility, especially if the image conveys critical information.
• **Responsive Images: Use the srcset attribute for responsive images to ensure that your images look great on all devices.

Conclusion

Turning an image into a link in HTML is a straightforward process that enhances the interactivity of your web pages. By using the tag to wrap an image, you can easily create clickable images that redirect users to other pages, external websites, or content. Additionally, adding styling effects and accessibility features improves the user experience, making your webpage more user-friendly and responsive.