How to use HTML Anchor Link (a href Code Examples)

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.

 

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.

 

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>

 

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>

 

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.

 

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>

 

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>

 

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>

 

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>