How to Make a Picture Link in HTML

PDF download Download Article
PDF download Download Article

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

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/54\/Make-a-Picture-Link-in-HTML-Step-1.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-1.jpg","bigUrl":"\/images\/thumb\/5\/54\/Make-a-Picture-Link-in-HTML-Step-1.jpg\/aid2477375-v4-728px-Make-a-Picture-Link-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Open a text editing program such as Notepad or WordPad on Windows, or, on a Mac open up TextEdit, or Dreamweaver on either platform.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/Make-a-Picture-Link-in-HTML-Step-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-2.jpg","bigUrl":"\/images\/thumb\/d\/d1\/Make-a-Picture-Link-in-HTML-Step-2.jpg\/aid2477375-v4-728px-Make-a-Picture-Link-in-HTML-Step-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/Make-a-Picture-Link-in-HTML-Step-3-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-3-Version-2.jpg","bigUrl":"\/images\/thumb\/7\/79\/Make-a-Picture-Link-in-HTML-Step-3-Version-2.jpg\/aid2477375-v4-728px-Make-a-Picture-Link-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Type the photo-based link opening tag (known by it's more sophisticated name as an " a nchor" element-hence the "a"), <a href=".
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c9\/Make-a-Picture-Link-in-HTML-Step-4-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-4-Version-2.jpg","bigUrl":"\/images\/thumb\/c\/c9\/Make-a-Picture-Link-in-HTML-Step-4-Version-2.jpg\/aid2477375-v4-728px-Make-a-Picture-Link-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Type the link you want the viewer to see (including the http://)
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Make-a-Picture-Link-in-HTML-Step-5-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-5-Version-2.jpg","bigUrl":"\/images\/thumb\/4\/45\/Make-a-Picture-Link-in-HTML-Step-5-Version-2.jpg\/aid2477375-v4-728px-Make-a-Picture-Link-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/Make-a-Picture-Link-in-HTML-Step-6-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-6-Version-2.jpg","bigUrl":"\/images\/thumb\/1\/18\/Make-a-Picture-Link-in-HTML-Step-6-Version-2.jpg\/aid2477375-v4-728px-Make-a-Picture-Link-in-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Use the form <img src="imagefilenamehere.gif">.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/Make-a-Picture-Link-in-HTML-Step-7-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-7-Version-2.jpg","bigUrl":"\/images\/thumb\/8\/8b\/Make-a-Picture-Link-in-HTML-Step-7-Version-2.jpg\/aid2477375-v4-728px-Make-a-Picture-Link-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Type the photo-based link closing tag, </a>.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/Make-a-Picture-Link-in-HTML-Step-8-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-8-Version-2.jpg","bigUrl":"\/images\/thumb\/c\/c6\/Make-a-Picture-Link-in-HTML-Step-8-Version-2.jpg\/aid2477375-v4-728px-Make-a-Picture-Link-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    9. Advertisement

Community Q&A

Search
Add New Question
  • 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.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 9 Helpful 24
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      • To ensure the reader of the code understands what the object is that denotes that the picture will create the link. Ensure that both the <a> and <img> and </a> HTML tags are placed on one the same line
        Thanks
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Insert Images with HTML
      How to
      Get the URL for Pictures
      How to
      Create a Link
      4 Ways to Add a Link to a Picture
      How to
      Learn HTML
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Run a HTML File
      How to
      Change the Button Color in HTML
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Write HTML Code
      How to
      Create an Email Link in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      Advertisement

      References

      1. http://www.pageresource.com/html/image3.htm

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 139,932 times.

      Is this article up to date?

      Advertisement