Skip to content

HTML for greens - HTML

How to insert an image (graphic) link (hyperlink, hypertext reference), i.e. a clickable button, on a Web page?

All links presented so far have been in text form. If you want to include image buttons in your website's menu, you should use the following command:

<a href="address"><img src="Specify the relative path to the image" alt="Specify alternative text here" style="border: 0"></a>
where "address" can be:
  • the relative path to any subpage of your website (e.g., index.html),
  • an internet address preceded by "http://" or "https://" (e.g., http://www.example.com),
  • an email address preceded by "mailto:" (e.g., mailto:jan_kowalski@example.com).
Instead of "Specify the relative path to the image", provide the location on your disk where the desired image is located. For "Specify alternative text here", input a brief description that will appear in case the image fails to load.

As you can see, image links can be used in combination with any type of links (subpage, web address, or email). However, they are most commonly used to create navigation menus for websites (subpage links).

It's best to save button images in the GIF format. If you lack artistic skills, you don't have to draw all the graphics yourself. You can find many websites on the Internet where you can download ready-made buttons for free.

Example <a href, img>

Click on this button: Click

Questions and Answers

How to make an image a link?

The easiest way to place an image link on a page is to insert an image inside the link tag. Image links can be created for all types of links: to a subpage, to a web address, and for email links. For example, if the image file is named "image.jpg" and is located in the same directory on your computer's disk as the *.html document where you want to insert the image link, you can use the following tags accordingly: <a href="subpage.html"><img src="image.jpg" alt="Go to subpage" style="border: 0"></a> (subpage link), <a href="https://www.google.com/"><img src="image.jpg" alt="Go to Google" style="border: 0"></a> (web address link), <a href="mailto:contact@example.com"><img src="image.jpg" alt="Contact" style="border: 0"></a> (email link).

How to add a hyperlink to an image?

Hyperlink, also known as a link or simply a hypertext link, is a link that can contain not only plain text but also an image, and even both an image and its text caption simultaneously. This means the link will work whether the user clicks directly on the image or its caption. For example: <a href="large-image.jpg"><img src="small-image.jpg" alt="View large image" style="border: 0"><br> Enter the image caption here</a>.