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.

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.