In this article we are going to talk about coding links with HTML. Links are very important to any website. You want to have links to places within your own website, and you want to have outbound links going to other places.
So links are really important. You can set links as text links, image links, banner links, and button links, there are lots of things that you can do with links.
Coding Links In HTML
To code links in HTML we are going to use the <a> tag. The <a> tag is what defines our hyperlink….or link.
A hyperlink is a word, group of words, or image that you can click on to jump from one page to the other. So, this is what your reader is actually going to click on. It can be either a word, text or image.
There are two things that we need to create our HTML links:
- The URL where we want to take our reader to
- What text or image to show for the link
The first thing we need to do is know what page is it that you want to link to? We need to know the exact specific URL that we are going to take our reader to.
The second thing we need to know is we need to know the exact text or image that we are going to show for the link. So, if we are using an image or a button, or something, we need to actually have the code for that image. We will talk about how to create that code in a future article. But we are going to need an image code for the link. Or….we can use text. Whatever you prefer, but we will need these two things in order to create this code.
How To Use the <a> Tag
<a href=”url”>Link Text </a>
This tag here is a little bit different than other tags. Normally, we would just have a bracket, the letter and the bracket. As you can see here, we have a href equals quotations URL and then we are closing the bracket.
So we actually have a whole bunch of stuff shoved into this opening bracket. The URL is the location that we are going to take the reader to. So your code is not actually going to say URL, we will replace that with the actual URL address for the location you want the reader to go to. So, that’s all in the opening bracket.
So the next part, after the opening tag is the text that you want to show. Your image code, or whatever you want to show is going to be where it has Link Text. And then we close the tag with the </a> tag.
- Replace the URL with where you want to link to
- Replace Link Text with what you want the reader to click on
Lets look at an example:
<a href=”https://robswebdesign.net”>Visit RobMcDonaldWebDesign.com for Awesome Web Design Training! </a>
Here we go, this looks like a whole big pile of globby goop if you have never seen this before. But, lets just walk through it, it’s real simple.
We have an open href equals quotation, and then we have the URL of where we are linking our reader to. So in this case I am just using my website, robswebdesign.net. Its a fabulous website, you should check it out.
One thing to notice is that I am including the https:// That’s very important, our link is not going to work without it. So make sure you are including that in your full URL.
So we have <a href=”https://robswebdesign.net”> and then you put in whatever text or image you want to use. Here I am just using Visit RobMcDonaldWebDesign.com for awesome website training. Then we are closing it with the </a> tag.
This is going to show online as:
The viewer can then click on this and they will be taken to the exact web page that I want to take them to.
One More Thing……
You can also add the target=”_blank” to the URL. This is important if you want to open up you links in a new window. Sometimes when you have your website open and you want to link to somebody, you don’t want to lose them off of your website. You want to keep them on your site. So you can open whatever link that you want in a new window.
And all you are going to do is add in this small snippet of code in here. Here is an example below so you can see where to add it into your link.
<a href=”https://robswebdesign.net”target=”_blank”>Visit RobMcDonaldWebDesign.com for Awesome Website Design Training!</a>
Hopefully this article helped you to understand how to code your links, but if not, the easy thing to do is to pop open one of your blog posts and try this in there. You will see that the more you try it, the more you will get used to it. It will be easier to understand and soon you will be saying it in your sleep.
Latest posts by Robin McDonald (see all)
- Optimize Your WordPress Images With ShortPixel - January 15, 2018
- How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
- Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017