How to Make a Picture Link in HTML

Last Updated: February 1, 2020 Tested

Ever want to add a link to an HTML document, but wanted to show the reader an image instead of text? Most HTML coders know, and so can you, after you've read and followed the directions in this article.

Steps

1
Open a text editing program such as Notepad or WordPad on Windows, or, on a Mac open up TextEdit, or Dreamweaver on either platform.
- You can also use Notepad++, if you want.
2
Type all preceding HTML text that you want before the photo-based link.

Advertisement
3
Type the photo-based link opening tag (known by it's more sophisticated name as an "anchor" element-hence the "a"), <a href=".
4
Type the link you want the viewer to see (including the http://)
5
Follow the that portion of the text off with another quotation mark (") and triangular bracket (>).
6
Type the image, in HTML form, of the picture you'd like to use. Use the form <img src="imagefilenamehere.gif">.
7
Close the photo-based link with a link-closing HTML tag. Type the photo-based link closing tag, </a>.
8
Type the proceeding HTML text that you want for the remainder of the document.

Community Q&A

Question

What do I do after typing the code? Nothing happened.

Community Answer

You have to actually put the HTML code into a website or blog before it will function as it should.