How to create a text link and an image link. How to make links open in a new tab – Basics of HTML #2

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 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.

how this works?

  • 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.

Email Link

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

<a href="mailto:[email protected]">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" >

What does it mean?

  • 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

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> 

How this works

  • 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.

Open 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.

  1. The Basics of HTML
  2. Creating a text or image link and making it open in a new tab/windowthis post
  3. Creating and using lists
  4. Text Formatting in HTML

7 Comments

  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 🙂

Sorry, comments are closed!