It’s been quite a while since I’ve written any tutorials for you guys. My computer nerd heart is having withdrawals. Seriously, it’s really fun for me. Such a dork. In this post we’ll talk about how to code a link in HTML. Even bloggers who use the visual editor in WordPress will sometimes need to know how to create a link in HTML on text, images, and email addresses. Don’t worry if you don’t know any HTML at all. In this post we’ll go over the basic fundamentals of how to make links.
HTML is short for hypertext markup language and is the basic coding used to build websites. Links, also referred to as hyperlinks and hypertext links, are one of the most fundamental parts of HTML. Almost every page of a website has hyperlinks.
How to Create a Hyperlink
Here is the code of a basic html link:
<a href=”http://www.examplewebsite.com”>Clickable Text</a>
The a starts and ends all hyperlinks. Notice the code starts with a and ends with the closing tag </a>
href stands for hypertext preference. This specifies where the link goes to. In this case it’s a website, but links can also point to images, email addresses, or other files. The destination should always be inside the quotation marks.
The Clickable Text area is the actual text you want to display on your page that will be hyperlinked. This area could also be an image that is clickable. The main thing to remember is that this is the part people can see and click on.
EXAMPLE:
Here is the code for a paragraph (<p>) with a hyperlink in it:
<p>This is a tutorial about how to code a link in HTML. If you would like to see what other tutorials I have created, you can go to the <a href=”https://www.onmoxieandmotherhood.com/category/tech-tutorials”>Tech Tutorials</a> category on this site. </p>
Here is what the paragraph actually looks like to the site visitor:
This is a tutorial about how to code a link in HTML. If you would like to see what other tutorials I have created, you can go to the Tech Tutorials category on this site.
As you can see, only the text within the > < area in the hyperlink code is actually clickable.
How to Make a Link Open in a New Window
Now let’s talk about how the link opens. In some cases, we want links to move from the page we are currently on to a new page within the same window. Other times, we want the link to open in a new window so that the user doesn’t technically leave our page but has access to the link as well.
We can control how the link opens using the target attribute.
For example, this link will open in a new window:
<a href=”http://www.examplewebsite.com” target=”_blank”>Clickable Text</a>
The target attribute’s value in this case is _blank, which tells the link to open in a new window.
To make the link open within the same window, you can either leave off the target attribute completely (it will default to the same window), or change _blank to _self.
How to Code a Link in HTML on an Image
If you would like the hyperlinked area to be an image instead of text, you simply change out what is inside the a tag.
Instead of the text, you would be the img tag. To display an image using HTML, you first need to upload the image to your server. If you are using WordPress this is as simple as going to Media, then Add New.
From the next page, click “Select” and then choose the image from your computer you would like to upload. Once it has finished uploading, click Edit.
Within the Edit page for that file, you will copy the File URL. This is the exact location of where this specific file is hosted.
It will look similar to this, but with your site URL and file name, of course:
https://www.onmoxieandmotherhood.com/wp-content/uploads/2018/12/code-hyperlink-html.png
Now, you can create the img code for this file.
It looks like this:
<img src=”IMAGEURLHERE”>
So, for example:
<img src=”https://www.onmoxieandmotherhood.com/wp-content-uploads/2018/12/code-hyperlink-html.png”>
Now that you have the code for your image in HTML, you can hyperlink it in HTML as well. All you have to do is insert the img tag into the clickable area of the link code.
So instead of this for clickable text:Â
<a href=”http://www.examplewebsite.com” target=”_blank”>Clickable Text</a>
You will have this, for a clickable image:
<a href=”http://www.examplewebsite.com” target=”_blank”><img src=”https://www.onmoxieandmotherhood.com/wp-content-uploads/2018/12/code-hyperlink-html.png”></a>
The visitors to your site will just see the image and be able to click on it. And because we have target=”_blank” in the above code, remember it will open in a new window. If you want the link to open in the same window, simply take that part out or change _blank to _self.
How to Create a Hyperlink to an Email Address
If you would like to code a link to an email address instead of a website, there is just one simple difference in how you will code your hyperlink.
We use the mailto attribute to specify that we are linking to an email address. This will open in the user’s default mail program with the email address in the To: field.
<a href=”mailto:jessica@onmoxieandmotherhood.com”>Email Me</a>
What the user will see is something like this:
If you have questions that you would like me to create a tutorial for, go ahead and email me now.
When you click the email me link, it looks something like this (depending on what type of computer and email program the user is on).
You can take this one step further and code in what the subject line of the email should default to. This is a good idea when you want to easily identify where the email is coming from or what it’s about.
Here is an example:
<a href=”mailto:jessica@onmoxieandmotherhood.com?Subject=”Question or Comment about How to Code a Link in HTML Article”>email Me</a>
The user will still see this within the text:
If you have questions that you would like me to create a tutorial for, go ahead and email me now.
When you click the email me link now, it looks something like this (depending on what type of computer and email program the user is on).
If needed, you can also add in Body text to your email link.
Here is an example:
<a href=”mailto:jessica@onmoxieandmotherhood.com?Subject=”Question or Comment about How to Code a Link in HTML Article&body=I just read your post and…”>email me</a>
The user will still see this within the text:
If you have questions that you would like me to create a tutorial for, go ahead and email me now.
When you click the email me link now, it looks something like this (depending on what type of computer and email program the user is on).
You can also add &cc= or &bcc= to the code.
Keep in mind, these coded links only open in the user’s installed email client. For example, on my Macbook the email hyperlinks open in the Mail app that I don’t actually use. I use Gmail instead. If the user has Outlook, the email hyperlink will open there.
How to create a hyperlink that Jumps To a section of a page
Jump To links are really helpful when you have a long article, like this one, with several headings that mark different sections of text. To make it user-friendly, you may want the user to use a sort of index, and be able to jump straight to the section they are most interested in, without having to scroll to find it. These are also called page anchors.
Each section that you want to link to will need it’s own tag that you will identify and then link to.
For example:
<a href=”#top”>Jump to Top of Page</a>
In this case, #top is the tag or identifier of the section this hyperlink is linking to.
Now, we need to place code into the page to identify where #top is. It will look like this:
<a name=”#top”></a>
Notice that instead of href it says name, because this is not a link. Also notice that it has the same tag/id as the link we want to associate it to, #top in this example.
For this example, I have placed the a name code at the top of this page (you can’t see it), and I am placing the a href code here so you can see how it works:
In the above example the a name tag has no text inside of it. However, you can use sections of texts to be more specific about where you want the link to jump to. As I mentioned, creating an index for a long article with several headers is a good use for this.
In that case, your code would look like this:
<a name=”#newwindow”>How to Make a Link Open in a New Window</a>
You will literally go to that header within you text and put <a name=”#newwindow”> before it and </a> after it.
Note that I have assigned a new tag/id to this section called #newwindow. These tags can be whatever you want them to be, but for your own sanity they should easily identify what that section actually is. The only important part is that they have no spaces and that they are identical in the a href and a name attributes so it works.
Go ahead and test out the links I’ve set up within this article:
How to Make a Link Open in a New Window
How to Code a Link in HTML on an Image
Note: If you have a Sticky Menu like I do, you may need to move your a name tags a bit to display the headers. If you clicked on the links above then you noticed that it jumps to the section of the page, but you don’t see the actual header. That is because it’s hidden behind the Sticky Menu.
Sticky Menu: A menu that is locked into place so that it doesn’t disappear as the user scrolls down the page.
If I want my page anchor to show the header below the sticky menu, I would just need to play with where I place the a name tag. In the example above, the headers are hidden. By simply moving the a name tag up a bit within the article, I can make it jump to the exact display I want.
See this example:
How to Code a Link in HTML on an Image
Now that you have your page anchors set up, you can also link directly to a specific section of your page from another page. Pretty cool, huh? All you have to do is add the tag to the end of the page URL like this:
https://www.yourwebsite.com/page-name#pageanchortag
So in the case of this specific article, I can now use a URL like this:
https://www.onmoxieandmotherhood.com/tech-tutorials/how-to-code-a-link-in-html#imagelink2
In this example, https://www.onmoxieandmotherhood.com/tech-tutorials/how-to-code-a-link-in-html is the URL of this article and I’ve simply added #imagelink2 to the end of it (that is the tag I used to create the last example above where the header is not hidden by the sticky menu).
This can come in handy when you are writing related articles and want to link a specific area of text in another related article.
A Note on Coding in WordPress
If you are a WordPress user who normally works in the Visual editor, you will need to switch to Text mode to add any code to your post. Otherwise, WordPress will just see it as plain text and it won’t work. For example, all of the examples of code that I wanted you to see in this post were typed in Visual Mode, but when I want the code to actually work I have switched over to the Text editor, inserted the code, and then switched back to Visual mode.
Now you know how to code a link in html for several different uses! If you have any questions that I didn’t cover, comment below and I will get back to you quickly! Also, I love creating tutorials like this. Seriously guys, I am a dork. So, send me your questions on other HTML, CSS, Excel, Adobe Creative Suite programs, related questions or anything else you think I might know, and if I do, I will create a tutorial! Even if it’s something I don’t know, I will probably then try to figure it out because I like a good challenge.
Related: How to Add Code to Your Head Tag in WordPress
Interested in learning how to launch your own blog? Follow my easy guide here.
Here are a few of my favorite blogging and websites tools:
- RankIQ: My favorite blogging tool ever. Check it out.
- ConvertKit: for sending marketing messages to previous or potential clients.
- Siteground: Another great option for web hosting with awesome customer service and great speed.
Other posts that you may like:
Hi, I’m Jessica! I am wife to Chris, and mom to Kaiper, Alana and Koa. I am a graphic designer, website developer and aspiring author. In this space, I share about everything from parenting, working from home, food we cook, and lots of things for kids! Learn more about me here.
