Master Frontend Development: Zero to Hero | Day 4 With D1codes | How to Use an Image as a Link in HTML
We can add page links to a web page. HTML links are hyperlinks. The <a> tag defines a hyperlink and used to link from one page to another. href attribute is used with the <a> tag, which indicates the link's destination.
To make page links in an HTML page, use the <a> and </a> tags, with href attribute used to define the links. We should use the <a>…</a> tags inside <body>…</body> tags.
Syntax
Following is the syntax to add image as a link on the web page.
<a href="link address">
<img src="image destination"></a>
Example
Following is the example program to make image as a link.
<!DOCTYPE html> <html> <body> <p><a href="https://www.Youtube.com/"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjh3kgJI5R7I7APTJm0fCainxLjd_z0ktOc5dAtncQ0iQ1Mmpb3jdXwQfhdBG99TJDm7iLS-wpssPh_ygU5DTpel1D3u1uT7I_iq7FGgCuzQ5l7BF-s2GqAvUOOKutaQrUpsVBAdtQDJJsrDDV4uPd9Z64uwBwA31InUGZyTzjNQX0-VoSf77njbsrFTA=w640-h426" style="width:50px;height:50px;"></a></p>
</body> </html>
Following is the output for the image as a link, clicking on the image will navigate us to google home page.
Example
Following is the example program to make image as a link.
<!DOCTYPE html> <html> <body> <center> <h2>Image as a Link</h2> <a href="https://www.d1codes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjh3kgJI5R7I7APTJm0fCainxLjd_z0ktOc5dAtncQ0iQ1Mmpb3jdXwQfhdBG99TJDm7iLS-wpssPh_ygU5DTpel1D3u1uT7I_iq7FGgCuzQ5l7BF-s2GqAvUOOKutaQrUpsVBAdtQDJJsrDDV4uPd9Z64uwBwA31InUGZyTzjNQX0-VoSf77njbsrFTA=w640-h426" alt="ExamplePhotoFromUnsplash" style="width:50px;height:60px;"></a> </center> </body> </html>
Following is the output for the image as a link, clicking on the image will navigate us to destination webpage.
Example
Following is another example program to make image as a link.
<!DOCTYPE html> <html> <head> <title>HTML Image as link</title> </head> <body> The following image works as a link:<br> <a href="https://www.shayrielove.blogspot.com.com/"> <img alt="Shayrielove" src="https://blogger.googleusercontent.com/img/a/AVvXsEjh3kgJI5R7I7APTJm0fCainxLjd_z0ktOc5dAtncQ0iQ1Mmpb3jdXwQfhdBG99TJDm7iLS-wpssPh_ygU5DTpel1D3u1uT7I_iq7FGgCuzQ5l7BF-s2GqAvUOOKutaQrUpsVBAdtQDJJsrDDV4uPd9Z64uwBwA31InUGZyTzjNQX0-VoSf77njbsrFTA=w640-h426" width=150" height="70"> </a> </body> </html>
After clicking on the image, it will redirect to the destination webpage.
Leave a Comment