How to use HTML Anchor Link (a href Code Examples)
John on July 19, 2021
A link in HTML is created using the anchor (a) tag. In this tutorial we will learn how to create HTML links in a variety of ways depending on what you want to achieve.
HTML Link Syntax
Here is the syntax of an HTML anchor (a) element:
<a href="[protocol]url" [target="type"] [title="description"]>link text</a>
a– the anchor element; anything before the closing tag will be part of the link.href– the destination of the link.target– how the browser will navigate to the link destination.title– a more detailed description of what the link is pointing to.
Link to Remote Address Example (Absolute URL)
Here is a basic link example demonstrating how to link to the homepage of skillsugar.com.
<a href="https://www.skillsugar.com/">Go to SkillSugar</a>
Relative Link Example (On the Same Domain)
If you are linking to a URL on the same domain, you don't have to supply the full (absolute) path with a protocol.
<a href="/contact.html">Contact page</a>
HTML Link Target Attribute
The default behaviour of the link taking the user to the destination, use the target="" attribute. Here are the values of what this attribute can be set to and what they do:
_self– open the link in the same tab/window (default behaviour)._blank– open the link in a new tab or window._parent– open the link in the parent frame._top– open the link in the full body of the window.
Open Link in New Tab Example
Here is an example of using the target="" attribute to open a link in a new tab.
<a href="https://www.skillsugar.com/" target="_blank">Go to SkillSugar</a>
HTML Image Link Example
To turn an image into a link, wrap the img tag inside an anchor element like this:
<a href="https://www.skillsugar.com/" target="_blank">
<img src="https://www.skillsugar.com/media/image/redirect-nginx-1626379354.png" alt="SkillSugar">
</a>
Email Address Link Example
To link to an email address, set the href protocol to mailto: followed by the email address to send to:
<a href="mailto:[email protected]">Send email</a>
Here is a more comprehensive email link example with a preset subject and message:
<a href="mailto:[email protected]?subject=Hi!&body=Check%20this%20out!">bb</a>
HTML Link with Title Example
The title="" attribute on a link provides a way to provide a more detailed description of where the link is pointing to which appears when the user hovers over its for a couple of seconds.
<a href="https://www.skillsugar.com/" title="a coding blog">Go to SkillSugar</a>
