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


<a href="">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="" 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="" target="_blank">
  <img src="" alt="SkillSugar">


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="" title="a coding blog">Go to SkillSugar</a>