Tutorials, Tips, and Resources

for Creating a Better Blog

7-Day Blog Bootcamp Challenge

Shape up your blog in a week! (learn more)

How To Create Image Links

I wanted to talk today about something that may seem super easy for some, but I constantly see others struggling with when creating their blogs. I want to talk about image links.

Those who are experienced in HTML need not read any further. I’m dedicating this one to all of you beautiful newbs… because many years ago I was one of you as well.

Probably one of the most basic things you can learn when you dive into the world of HTML is how to create an image link. Or in other words, an image that (when clicked) sends you to a specific URL.

My goal is to have you memorize this, not just copy and paste a code. You will never learn anything by copying and pasting! I’ll do my best to explain what each part of the code does so that you actually know how it functions as well.

Here is a standard image link code:
<a href="http://www.yoururl.com"><img src="http://www.yoururl.com/image.jpg"></a>

Let’s break it down.

The first part (blue) of your code is your link code. HTML links are always wrapped in an <a href> element. Always, whether it be a text or image link. Make a mental note right now that <a href> means “link”. With a lot of HTML, you will have your element, followed by the action. In this case, the element is a link (<a href>) and the action is the destination (your URL).

The second part (green) of that element is just telling the <a href> (link) where you want it to go to. Since <a href> simply won’t work on its own, we need to set its destination. Basically, the link = (equals) “your URL”. Got it? Links should always start with http:// as that is their true URL. If you forget this part and just start it with “www“, you’ll quickly realize that your link does not direct to your URL but rather tries to open that URL within the page you are on by adding it to the end of your current URL.

The third part of the code is your image code. You should have your image ready and uploaded somewhere, like Photobucket or through your own blog if that is an option. <img src> means “image source“. In other words, the source of your image. Easy, right? Just like the link element, your code is simply asking you where your image is located. Enter the URL of your image in the fourth part of the code, in between quotation marks as shown. So now, your image destination = your image URL.

Finally, the last part of the code is your closing element. The </a> closes the link, plain and simple. It’s calling upon the “a” from “a href” and telling it to stop. It means that after your image, nothing else should be linked. If you leave this open, all other elements on your page following this code would be linked as well.  The thing to remember in HTML is to always close your code.

Practice this on your blogs or websites. Try writing it out instead of copying and pasting.

Opening the link in a new window

One other quick example I wanted to show was how to open your link in a new window/tab. Sometimes you want to keep visitors on your website instead of directing them completely away from your content. Here is what that code looks like:

<a href="http://www.yoururl.com" target="_blank"><img src="http://www.yoururl.com/image.jpg"></a>

All I added here was a simple link target within the same link code.  Target means just that, where you would like to target your link to. See how the quotations separate each action? They are still contained within the image link (<a href>) but now you’re telling it to do something extra. “_blank” is standard HTML talk for opening in a blank (aka NEW) window.

The ALT Attribute

Finally, let’s talk about the ALT attribute. The Alt attribute should be added to the ending of your image code to specify alternate text in case the image cannot be displayed. It also helps your images appear in search engine image search results. Here is how you add the Alt attribute below:

<a href="http://www.yoururl.com" target="_blank"><img src="http://www.yoururl.com/image.jpg" alt="Description of Image"></a>

Your Alt text can be whatever you like, but should describe the image.

Things kinda make sense now, don’t they? It’s all about how you associate what you may consider a crazy computer language with normal terms. When you think about it like that, it starts to click.

If you have any questions or want to let me know what else you would like to see me cover, ask in the comments below!

  • Fernanda Turri Braga

    Great post, Dana! Love your blog.
    2 questions:
    – do you recommend adding the alt attribute?
    – what can I do to make the image a link in the home page but just an image on the actual post? Like, to read more, you can click ‘read more’ or the image, but when you are reading the post, you can’t click on the image anymore. Sorry, I don’t know if I am making myself clear!

    • Dana Fox

      I do recommend the alt attribute. Which platform are you using? Blogger? When you click on Read More it should only be visible on the home page, not the actual post page.

      • Fernanda Turri Braga

        Yes, it’s blogger http://www.newinmakeup.com/
        But I mean the first image of the post, not the ‘read more’ image.
        Thank you!

  • I’m doing something wrong, because I can’t link the images in my header. I did everything you wrote but when I view my blog and I click the Home image, instead of just one link it appears like this – http://expsdesign.blogspot.pt/%E2%80%9Dhttp://expsdesign.blogspot.com/%E2%80%9C – Can you help me understand what I’m doing wrong here? Thank you so much

    • Dana Fox

      I’m not able to see your blog as it’s invite only so I can’t really see what you mean. From what you’ve said, you probably have formatted your links wrong.

  • Molly Stone

    Where do I put this link, My blog is created with blogger, do I put it in the HTML and if so where?
    Thank you

  • Zakkiya Hamza

    Thank you very much Dana for making this very simple. I am pretty new to html and this basic thing has helped me plenty. For instance I wasn’t aware of using the alt attribute in my image links. 🙂

  • Thank you very much for this explanation Dana! I’ve been able to use this code pretty well so far, but after reading this and actually understanding what everything for makes using it and remembering it a whole lot easier.

  • i may be doing something wrong, on my wordpress site, the url bar shows 3 repeated urls of my site name. the link is totally correct. i think it may be something on my back end. any ideas on what I need to do?

  • That would be a widget from a company she is working with. An affiliate company called RewardStyle.

  • Rabid Raghav Pandit

    Good. For any HTML help click here-http://www.htmlhour.com/html-tags/a-tag-2/

  • Jennifer Merrill

    Thank you so much for this! Your site has been my go-to resource while i get my blog together!

  • OLaBiBi

    wow it worked for me!!
    thanx 🙂
    my blog <>

  • Kerenjem Kezia Lorenzo

    I don’t know where to put it. Could you please specify the exact place where I should put it? I’m afraid to ruin my html. Thank you!

  • Dharmesh Hadiyal

    It’s good
    If need some more info then video check: