HTML Links

A link in HTML is an element that, when clicked, redirects the user to another web page.  Links are usually text-based, but they can also be an image or something else. To create a link use the <a> tag -- this is called an anchor tag.

HTML Tutorial

Example

A link to Google.

Click here: Google
<div>
  Click here: <a href="https://www.google.com" target="_blank" >Google</a>
</div>

Link Syntax

The syntax for a link:

<a href="url">Link text</a>

The <a> tag defines an HTML link; a stands for anchor.

The href attribute defines the destination address (the URL or page the user will be taken to).

Link text is the visible part which will be displayed as a clickable text.

Note:  Links are also known as hyperlinks -- there is no difference, they are the same.

For more information about the anchor tag, see our HTML anchor Tag Reference.

Local Links

A local link points to a page on the same website -- i.e. the same domain.

Local links have a relative URL without the https://www.mysite.com part.

Most websites use local links almost exclusively.

Below is a local link to the SQL tutorial on this website.
Note that the href attribute does not include the https://www.dofactory.com/ part.

Please visit our SQL Tutorial

<p>
   Please visit our <a href="/sql"> SQL Tutorial </a>
</p>

Note:  Links that redirect to an external website are refered to as external links.
The Google link above is an example of an external link.


Link Colors

By default, a link will appear in these colors (all browsers support this):

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.

In most cases, these colors are undesirable, but they are easily customized with CSS.


Custom Link Colors

#

When creating link colors the hover and active link states need to be considered.

The hover state occurs when the mouse moves over the link.

The active state occurs when the link is clicked.

In CSS these states are represented by the :hover and :active pseudo classes respectively.

In this example, hover over the link to see the link color change to red. Then click (keep the button down for a while) to see it change to green. The background colors also change.

Link with custom colors: Google
<style>
  a.custom {color:darkblue;background:aliceblue;}
  a.custom:hover {color: orangered;background:cornsilk;}
  a.custom:active {color:forestgreen;background:paleturquoise;}
</style>

<div>
  Link with custom colors: 
       <a class="custom" 
          href="https://www.google.com" 
          target="_blank">Google</a> 
</div>

Link target Attribute

The target attribute specifies where to open the linked page.
It can be one of the following values:

Value Description
_self Opens the page in the same tab/window. This is the default.
_blank Opens the page in a new tab.
_parent Opens the page in the parent iframe. In the same iframe if there is no parent.
_top Opens the page in the topmost part of the iframe. In the same iframe if there is no topmost.
framename Opens the page in a named iframe.

An <a> tag with a target="_blank" attribute.
Clicking the link will open the linked page in a new browser tab.

This link opens Google in a new tab.

<p>
  This link opens
  <a target="_blank" href="https://www.google.com">Google</a> 
  in a new tab.
</p>

Image as Link

Images can also be used as links.
Clicking the image will open a new browser tab with the Google search page.

<a href="https://www.google.com/" target="_blank">
  <img src="/img/html/google.png">
</a>

Mailto Link

To send an email use the mailto scheme on the <a> tag.
Clicking the link will open the default mail client, such as, Outlook.

<a href="mailto:sales@company.com">
  Send us an email
</a>

Link title Attribute

The title attribute adds additional information to the element.
When the mouse moves over the element a tooltip with this information appears.

An <a> tag with a title attribute.
Hover your mouse over the Google link and a tooltip appears.

Hover over this link: Google

<p>
  Hover over this link:
  <a title="Click to visit Google"
     href="https://www.google.com"
     target="_blank">Google</a>
</p>

Did you know?

Did you know?

Creating a download link

HTML links redirect the user to other pages, but they can also function as a download link by adding a download attribute to the <a> tag.

Click the image and that same image will download.

<a href="/img/html/html5.png" download>
   <img src="/img/html/html5.png" alt="Download HTML5 image">
</a>

Bookmark links

A link can also point to another element on the same page.

These same-page links are refered to as bookmarks or anchers.

Two links are required on the same page: a source link and a destination link.

When the source link is clicked the page will scroll to the destination link (the bookmark).

The source link states: Go to bottom. A hidden destination link is located at the bottom of this page. Clicking the link will scroll the page to the bottom.

This is the complete code with source and destination links.

<!-- the visible source link -->
<a href="#bottom">Go to bottom</a>

...

<!-- the hidden destination link -->
<a id="bottom"></a>

The visible source link has an href attribute prefixed with a '#'.
And the hidden destination link uses an id attribute.

Tip:  The destination does not have to be an <a> tag. It can be any other element type, for example an <h2> which would naturally mark a specific section in a large document.


You may also like

Guides