The HTML code that makes a photo clickable
To make a photo into a link, you wrap the image tag inside an anchor tag. The anchor tag is what creates the link, and the image tag is what displays the photo. Here is the basic structure:
<a href="https://example.com"><img src="photo.jpg" alt="description"></a>
The href attribute in the anchor tag tells the browser where to send the user when they click. The src attribute in the image tag tells the browser which photo file to display. The alt attribute describes the photo for people using screen readers or when the image fails to load.
When a user hovers over the photo in their browser, the cursor changes to a hand pointer, the same way it does for text links. The photo itself does not change appearance unless you add CSS styling to do so.
Key Takeaways
- Wrap your image tag inside an anchor tag, with the href attribute pointing to the destination URL.
- Always include an alt attribute that describes what the photo shows, even when the photo is a link.
- Test the link in your browser to make sure it goes to the right place and the photo displays correctly.
- You can style the linked photo with CSS to add a border, change opacity on hover, or remove the default blue outline that some browsers add.
- A linked photo should look clickable to users — consider adding a hover effect or border so people know it is interactive.
Where the image file needs to live
The src path tells the browser how to find your photo file. If the photo is in the same folder as your HTML file, you can use just the filename: src="photo.jpg". If the photo is in a subfolder called images, use src="images/photo.jpg".
You can also link to a photo hosted on another website by using the full URL: src="https://example.com/photo.jpg". However, if that website removes the photo or blocks outside access, your image will break and show a broken icon instead.
For photos you control, store them in a folder on your own server. This way the link stays working even if other websites change their content.
Making the linked photo look clickable
By default, a linked photo looks the same as an unlinked photo. Many users expect clickable elements to have a visual signal — a border, a shadow, a color change, or something that says "click me." Without that signal, people may not realize the photo is a link.
You can add CSS to change the photo's appearance when someone hovers over it. For example, you can make it slightly transparent, add a border, or scale it larger:
a img:hover { opacity: 0.8; border: 2px solid blue; }
This code makes the photo 80% opaque and adds a blue border when the user's mouse moves over it. The effect disappears when they move the mouse away. You can also add a transition to make the change smooth instead of when ready: transition: opacity 0.3s;
Testing the link in your browser
After you write the code, open your HTML file in a web browser and click the photo. It should take you to the URL in the href attribute. If nothing happens, check that the href value is a complete URL starting with http:// or https://.
If the photo does not appear at all, the src path is wrong. Open your browser's developer tools (usually F12 or right-click and select "Inspect"), go to the Console tab, and look for an error message that tells you the file was not found. Compare the path in your code to the actual location of the photo file.
Test the link on different devices and browsers if you can. Some older browsers may not support certain CSS effects, but the basic link should work everywhere.
Common mistakes to avoid
Forgetting the alt attribute is a common mistake. The alt text should describe what the photo shows, not say "image" or "photo." For example, use alt="A red barn in Vermont" instead of alt="image". This helps people using screen readers understand what they are clicking.
Another mistake is using a relative path that breaks when you move files around. If you move your HTML file to a different folder, a path like src="photo.jpg" may no longer work. Using a full URL or a path from the root of your website is more reliable.
Do not make the photo so large that it takes a long time to load. Compress your image files before uploading them. Tools like TinyPNG or ImageOptim reduce file size without noticeably changing how the photo looks.
Linking a photo to a different website
The href can point anywhere — to another page on your own website, to a different website entirely, or to an email address. To link to another website, use the full URL: <a href="https://example.com"><img src="photo.jpg" alt="description"></a>
If you want the link to open in a new tab instead of replacing the current page, add target="_blank" to the anchor tag: <a href="https://example.com" target="_blank"><img src="photo.jpg" alt="description"></a>
Be careful with target="_blank" — many users find it annoying when a link opens a new tab without asking. Use it only when there is a good reason, such as linking to an external tool that the user might want to reference while staying on your page.
Frequently Asked Questions
Can I make a photo link to a different part of the same page?
Yes. Use an anchor link by setting the href to #section-name, where "section-name" matches the id attribute of an element on the page. For example, <a href="#top"><img src="arrow.jpg" alt="back to top"></a> links to an element with id="top".
What if the photo is too small or too large?
Add width and height attributes to the image tag: <img src="photo.jpg" alt="description" width="300" height="200">. The numbers are in pixels. You can also use CSS to control the size: img { width: 100%; max-width: 500px; } makes the photo responsive so it scales on different screen sizes.
Do I need to do anything special if the photo is a PNG or GIF instead of a JPG?
No. The src attribute works the same way for any image format. Just make sure the filename in your code matches the actual filename exactly, including the file extension. File names are case-sensitive on most servers, so Photo.jpg and photo.jpg are different files.
Can I make the photo a link and also have text next to it be a link to the same place?
Yes. Put both the image and the text inside the same anchor tag: <a href="https://example.com"><img src="photo.jpg" alt="description"> Click here</a>. Now both the photo and the text are clickable and go to the same URL.