In previous topics, we introduced you to the HTML language, talked about tags and how to use them when creating your first HTML page. For our latest post in our HTML Series, we’re going to show you how to create links to allow users to navigate between pages (or to external pages and websites) on your new HTML website.
Why Should You Create Links for Your Website
Internal Links
Internal links are links that navigate to pages (or documents like PDFs) on your website.
These links are useful when mentioning another article you have written, like this post about how to work from home. It can also be used when referring to the products and services you offer.
Websites like Wikipedia are a great example of websites that mostly make use of internal linking. When searching Google, you’ll most likely find Wikipedia at the top, and that’s because the site contains information on almost anything, and we mean anything.
Below is a graph from Ubersuggest showing us that Wikipedia ranks in position one to three for 43.9 million keywords. This is all done with their internal linking strategy.
External Links
External links (also called outbound links) are links that navigate to another web page or document like PDFs, etc.
These links are typically used when linking to other sites, documents, etc. like this for example.
In HTML, there are various link types like:
- Jump links / anchor tag – click here
- Button links – click here
- Mailto link – click here
- Telephone link – click here
- Image links – click here
How to Create Links in HTML
After learning about links and why they matter, now it’s time to learn how to start adding links (also known as hyperlinks) to your website. Luckily, it’s a simple piece of code.
Below is the basic structure for a simple HTML link:
<a href=“url”> Link text </a>
Example:
Basic Link Attributes
href
The href attribute defines the link address or URL.
Example:
<a href=“http://siliconoverdrive.com/contact”>Contact us</a>
http://siliconoverdrive.com/contact is the link address or URL.
Target
The target attribute defines where the link must be opened, aka in a new tab, in the same tab, etc.
_blank
What it does
Opens the link in a new tab. This is great to use when adding links to external sites or documents.
Why use _blank?
With _blank target, users can click on the link and the document, page, etc. will open in a new tab and won’t let them leave your website.
HTML Structure
<a href=“https://www.example.com” target=“_blank”>Click here</a>
_self
What it does
Opens the link in the same window. This is the default setting.
Why use _self?
This doesn’t need to be added as it’s the default setting unless the base element specifies otherwise; then “_self” can be used to override the base element.
HTML Structure
<a href=“https://www.example.com” target=“_self”>Click here</a>
_parent
What it does
Opens the link in the parent frameset.
Why use _parent?
This ensures the content stays within the current frame when clicked.
HTML Structure
<a href=“https://www.example.com” target=“_parent”>Click here</a>
_top
What it does
Opens the content in the top-level frameset.
Why use _top?
If your page has a few nested levels/framesets, this target ensures the content loads in the top frameset.
HTML Structure
<a href=“https://www.example.com” target=“_top”>Click here</a>
See the targets mentioned above in action:
HTML Link Types
How to Create an Image Link
If you want to make an image clickable, then add an image link. Simply place the image code within the tags.
Example:
<a href=”https://www.example.com”>
< img src=”img.jpg” alt=”This is an image” height=”100px” width=”100px” >
</a>
Click on the images below:
How to Create an Anchor Tag AKA Jump Link
When you want to add links that jump to sections on the same page (especially if it’s a long post or page), it can be helpful for users to be able to jump to certain sections. This is where you add an anchor tag.
Example:
<a href=”#section2”>Section 2</a>
<h2> Section 1</h2>
<p>This is a paragraph</p>
<a id=”section2”><h2> Section 2</h2></a>
<p>This is a paragraph</p>
When clicking on the Section 2 link above, it will jump to the “Section 2” heading.
How to create a Button Link
If you want the link to look like a button, use the < button > tags.
Example:
<button onclick=”window.location.href=’example.com’;”> Click here </button>
How to Create a Mailto Link
A mailto link opens the default mail client on a user’s pc once clicked on, allowing the user to send an email without manually navigating to their email, adding your email, and then drafting their message.
Example:
<a href=”mailto:name@email.com”>Text</a>
How to add a subject
<a href=”mailto:name@email.com?subject=The%subject%line“>Text</a>
How to Create a Tel or Telephone Number Link
A tel link is useful when users are viewing your website or web page on their phone. Using a tel link will open their call log, the number specified in the link will automatically be added, and the user can simply press the call button.
Example:
<a href=”tel:+27214485759”>Call us</a>
Country Code
When creating telephone links, remember to add the country code you use in your country.
For example, South Africa uses “+27” in place of the 0.
How to Check for Broken Links
Ensuring your site doesn’t contain broken links is great for both user experience and SEO. If a user clicks on a link and nothing happens or they receive a 404 error page, they will most likely leave your site.
Here are a few ways to check for broken links:
- Manually check links by clicking on them. This is not the best idea if you have a large website with over a 100 links…unless you really have all that time.
- Use tools like:
Now that we’ve learned all about HTML, what tags are, how to create your first HTML page, and now how to add links, next we’ll teach you how to create special characters!
Bookmark our Blog or like and follow our Facebook and LinkedIn page to continue learning with us.