HTML Links

HTML links are hyperlinks. You can click on a link and jump to another document or section.

When you move the mouse over a link, the mouse arrow turns into a little hand.
Links are specified using the <a> tag.

HTML Links - Hyperlinks

A links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images.

HTML Links - Syntax

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

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

The HTML <a> tag defines a hyperlink.

This example shows how to create a link to google.com:

Example

<a href="https://www.google.com/">Visit Google.com!</a>

Try this code ❯

By default, links will appear as follows in all browsers:

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

HTML Links - The target Attribute

This attribute is used to specify the location where linked document is opened. Following are the possible values:

Option	Description
_blank	Opens the linked document in a new window or tab.
_self	Opens the linked document in the same frame.
_parent	Opens the linked document in the parent frame.
_top	Opens the linked document in the full body of the window.
targetframe	Opens the linked document in a named targetframe.

This example shows how to open the linked document in a new browser window or tab:

Example

<a href="https://www.google.com/" target="_blank">Visit Google.com!</a>

Try this code ❯

Absolute URLs vs. Relative URLs

Absolute URL: a full web address in the href attribute.

Relative URL: A local link a link to a page within the same website is specified with a relative URL (without the "https://www" part).

This example shows how to add absolute and relative URLs:

Example

<h1>Absolute URLs</h1>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h1>Relative URLs</h1>
<p><a href="html-intro.html">HTML Introduction</a></p>
<p><a href="tags.html">HTML Elements</a></p>

Try this code ❯

HTML Linking to a Page Section

You can create a link to a particular section of a given webpage by targeting id attribute.

This example shows how to link within a webpage:

Example

<a href="#bottom" id="top">Go bottom</a>

<div style="height: 1000px; background: red"></div>
<div style="height: 1000px; background: green"></div>

<a href="#top" id="bottom">Go top</a>

Try this code ❯

HTML Links - Image Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example

<a href="index.html">
	<img src="smiley.png" alt="HTML tutorial" style="width:32px;height:32px;">
</a>

Try this code ❯

HTML Link to an Email Address

The HTML <a> tag provides you option to specify an email address to send an email.

This example shows how to use email link:

Example

<a href="mailto:username@example.com">Send email</a>

Try this code ❯

You can specify a default email subject and email body along with your email address.

This example shows how to set predefined subject and body content:

Example

<a href="mailto:username@example.com?subject=Feedback&body=Message">
Send Feedback
</a>

Try this code ❯

HTML Button as a Link

JavaScript allows you to use an HTML button as a link.

This example shows how to use button as link:

Example

<button onclick="document.location='tags.html'">HTML Elements</button>

Try this code ❯

Setting Link Colors

This example shows how to change link colors:

Example

<head>
<style>
a:link {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: green;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>

Try this code ❯

By default, links will appear as follows in all browsers:

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

Note: A complete list of all HTML tags, see HTML Tag Reference.