How to create a text link, an email link and an image link (and make links open in a new tab)

Todays post will be on creating links which is probably one of the first things you’ll learn in a web design and development course.

It may seem basic and simple but you’d be surprised how often I get asked how to make an image link to something else.

This image could be a photo, an icon or a button, it doesn’t matter the code remains the same.

This tutorial will cover:

  • Text links – Adding text that links to a specific URL
  • Create an email link
  • Adding an image using HTML
  • Image links – Adding an image that links to a specific URL

Creating a text link using HTML

The reason I’m first covering regular links is because you need to know the code for this in order to add a link to an image. Here’s a stripped back version of a simple text link.

<a href="URL">TEXT TO APPEAR</a>

So when you fill in your details it will look something like this

<a href="https://xomisse.com/blog">xomisse blog</a>

Which will look like xomisse blog in a blog post, comment, forum, etc.

The first section of this code <a href="URL"> can be broken down into two parts – <a href= is for a link. It doesn’t matter if the element is text or an image, this is always the code for a link.

The next part is the destination of the link "URL" in other words where the browser will direct us to when we click on the element. You should always use the full URL – this means including http:// otherwise the URL will try open in the page you are currently on and you’ll see an error. We then close this section using >

The second section is the text that appears. This will be visible in your blog post or comment as a link once the HTML converts it. This is also where we add the image which I’ll show below.

And finally the third section. In HTML, if you open a tag such as <a href="URL"> you must close it so we add </a> at the very end. This tells <a href= to stop because the link is finished.

Creating an email link using HTML

Just like a normal link except instead of http://LINK we use mailto:EMAIL ADDRESS like this

<a href="mailto:YOUREMAIL@EMAILADDRESS.com">EMAiL</a>

Adding an image using HTML

Now lets look at how I’d add an image to a blog post or comment. Again, it’s really simple code.

<img src="DIRECT IMG URL" alt="Description" >

and when we fill it in

<img src="http://i1332.photobucket.com/albums/w000/xomisse/example.png" alt="Creating Image Links" >

The first part is specifying that this code is an image <img.

The second part is the source of the image src="DIRECT IMG URL", in other words where it’s pulling the image from. This could be from our blog or on an external hosting site such as Dropbox, Flickr, Photobucket, etc.

It’s important that the image is public and that the correct URL is used. We do not use the pages URL, we need to use the Image Address or Direct Image URL. This usually ends in the filetype of the image such as .png, .jpeg, etc.

We add alt="Description" to tell the browser, screen-readers and search engines what the image is. Read more about that for SEO here.

And then the closing >.

Creating an image link using HTML

So now that you understand how a link works and how to add an image, we just combine the two to link an image that will go to a specific URL when clicked. Here’s the link code again but this time instead of the TEXT we add the code for an image.

<a href="URL"><img src="DIRECT IMG URL" alt="Description"></a> 

We open a link <a href= and tell it where we want the image to link to "URL" and close the first part >.

Instead of a text link, we tell the browser we want an image <img which can be found at a certain location src="DIRECT IMG LINK" and add a description of the image or link alt="Description" before closing the image tag >.

Finally we close the link with </a>, that’s it.

How to open a link in a new tab/window

Sometimes we may want the linked page to open in a new browser tab or window. To do this we add target="_blank" in the first section before >. We can do this for both an image or text link.

<a href="URL" target="_blank">TEXT</a> 
<a href="URL" target="_blank"><img src="DIRECT IMG URL"></a>

That’s it – how to add a text link, image and an image link in HTML. I hope this helped clear up some confusion and you now understand how to link and image or an icon to another URL.

Post last updated:

7 responses to “How to create a text link, an email link and an image link (and make links open in a new tab)”

  1. Thank you, Ellie, for your excellent tutorials. Most people who are fluent in code forget that many of us don’t have an inherent understand of html. It’s so hard to find anything like this!

    1. Really glad you found it useful Katerina! My very first blog design related post on an old blog was on the basics of HTML and I’ve always meant to come back to it here, think I may start a series 🙂

  2. Monny

    Thank you ever so much for your continued tutorials; they are very helpful.

  3. Cherine Mendoza

    Thank you, very clear and helpful!

  4. Helpful post, God bless you good work.

  5. Good article. Thanks for the tutorial. I really needed to have an image and link open in a new tab.

  6. Rizwin

    Thank you. Useful Info…

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.