Linking Image in HTML: How to create links from images
By SteveFounder of PageDart
We are going to take a beginner friendly look at how to create image links on your website.
We will look at which HTML tags you need to use in the code.
If you have never done this before, don't worry! I will guide you through the whole process.
By the end of this article, you will be creating image links all over your web page and the Internet.
We are also going to look at some more advanced techniques towards the end of the article if you are feeling brave.
Grab a coffee, let's dive in!
How do you Create a Hyperlink?
To get links on your home page you need to create a hyperlink. To do this in HTML you need to use an <a> tag. Each <a> tag has two parts the opening and closing tag.
Here is an example:
In the above, you can see that the open tag:
Creates the start of the hyperlink. Then we close the tag with:
Any text that we write between the open and close tag is your link text. For Example:
My Great Link
To turn this into a link we need to add a URL. To do this we add the URL to the href attribute. The URL can point to anywhere on the internet. For this example we are going to use the PageDart homepage:
My Great Link
Make sure to include the full URL with HTTPS at the front.
That is all there is to create a text-only link in HTML. Next, let's look at how we can add an image to a web page using HTML.
How do you Create an image in HTML?
To add an image to your web page use an img tag.
This tag is a bit different from an a tag in that it does not have an opening and closing tag.
To create an img tag you need to give the tag a source file. Use the src attribute to do this:
This will add an image to the screen like this:
Now we have an image we need to turn it into a link. To do that we need to add a <img> tag inside the <a> tags creating a linking image in HTML.
Let's look at an example next.
Image as a link
To turn an image into a link you need to add the <img> tag inside the <a> tag. So taking our earlier example the source code would look like this:
The last example I am going to show is using an image map.
Advanced Technique: Image Map
Image maps are single images with clickable areas. They have lost popularity over the years but they are still part of the HTML5 specification. This means that browsers such as Internet Explorer, Chrome and Safari will support them.
Charts are good examples of Image Maps such as organizational charts, like this:
Then to make each pink area a clickable link we would create a map like this: