HTML Links

❮ Previous Home Next ❯

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

The HTML <a> tag defines a hyperlink.

It has the following syntax:

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

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

Example

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

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




HTML Links - The target Attribute

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

OptionDescription
_blankOpens the linked document in a new window or tab.
_selfOpens the linked document in the same frame.
_parentOpens the linked document in the parent frame.
_topOpens the linked document in the full body of the window.
targetframeOpens 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>



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>



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>






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>



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:[email protected]">Send email</a>

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:[email protected]?subject=Feedback&body=Message">
Send Feedback
</a>



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>



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>

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

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

❮ Previous Home Next ❯