HTML Links

❮ Previous Next ❯

Links are present on almost every webpage. They enable users to navigate by clicking from one page to another.

HTML Links - Hyperlinks

HTML links are hyperlinks.

By clicking on a link, you can navigate to another document or webpage.

When you hover the mouse pointer over a link, it transforms into a small hand icon.

Note: A link is not limited to just text; it can also be applied to images or any other HTML element on a webpage.

HTML Links - Syntax

The HTML <a> tag is used to create hyperlinks. Its syntax follows the following pattern:

The primary attribute of the <a> element is href which specifies the destination of the link.

The link text is the visible part that readers will see and click on.

By default, in all browsers, links display with the following appearance:

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

Tip: Certainly! Links can be customized using CSS to achieve a different appearance and style.

HTML Links - The target Attribute

By default, when you click on a link, the linked page will open in the current browser window. If you want to change this behavior and have the link open in a different target, you must specify the target attribute for the link.

The target attribute indicates the destination or location where the linked document should open when the link is clicked.

The target attribute can have one of the following values:

_self - Default. opens the linked document in the same window or tab where the link was clicked.
_blank - opens the linked document in a new window or tab when the link is clicked.
_parent - opens the linked document in the parent frame of the current frame or window.
_top - opens the linked document in the full body of the window, replacing any frames that may be present.

Absolute URLs vs. Relative URLs

In both cases mentioned above, the href attribute contains an absolute URL which is a complete web address specifying the exact location of the linked document.

HTML Links - Use an Image as a Link

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

Link to an Email Address

Use mailto: inside the href attribute creates a link that, when clicked, prompts the user's email program to compose a new email message.

Button as a Link

To utilize an HTML button as a link, incorporating JavaScript code is necessary.

JavaScript enables you to define actions for specific events, like a button click, by specifying what should occur in response to that event:

Link Titles

The title attribute provides additional information about an element. Typically, this information is displayed as a tooltip text when the mouse hovers over the element.

Chapter Summary

Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute used to specify the target location for opening the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute creates a link that, when clicked, opens the user's email program, allowing them to compose a new email message.

HTML Links - Different Colors

An HTML hyperlink appears in various colors based on whether it has been visited, is unvisited, or is currently active.

HTML Link Colors

You have the ability to alter the colors of linked states by employing CSS:

HTML Links - Create Bookmarks

HTML links allow you to make bookmarks, enabling readers to easily navigate to specific sections of a web page.

Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <a href="https://www.propertutorials.com/" target="_blank">Visit ProperTutorials</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <a href="https://www.propertutorials.com/" target="_blank">Visit propertutorials!</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h2>Absolute URLs</h2>
    <p>
      <a href="https://propertutorials.com" target="_blank">propertutorials</a>
    </p>
    <p>
      <a href="https://www.google.com/" target="_blank">Google</a>
    </p>
    <h2>Relative URLs</h2>
    <p>
      <a href="/html/html-images" target="_blank">HTML Images</a>
    </p>
    <p>
      <a href="/css/css-introduction" target="_blank">CSS Tutorial</a>
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <a href="/html/html-introduction"  target="_blank" >
      <img src="/assets/images/html/smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
    </a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <a href="mailto:someone@example.com">Send email</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <a href="/html/html-introduction"  target="_blank">
    <button>HTML Tutorial</button>
    </a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <a href="https://www.propertutorials.com/html/html-introduction" title="Go to propertutorials HTML section">Visit our HTML Tutorial</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <a href="https://www.propertutorials.com/html/html-introduction">HTML tutorial</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <a href="/html/html-introduction"  target="_blank" >HTML tutorial</a>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href="/html/html-links" target="_blank">HTML Images</a> 

</body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p>
      <a href="#C4">Jump to Chapter 4</a>
    </p>
    <p>
      <a href="#C10">Jump to Chapter 10</a>
    </p>
    <h2>Chapter 1</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 2</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 3</h2>
    <p>This chapter explains ba bla bla</p>
    <h2 id="C4">Chapter 4</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 5</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 6</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 7</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 8</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 9</h2>
    <p>This chapter explains ba bla bla</p>
    <h2 id="C10">Chapter 10</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 11</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 12</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 13</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 14</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 15</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 16</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 17</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 18</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 19</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 20</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 21</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 22</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 23</h2>
    <p>This chapter explains ba bla bla</p>
  </body>
</html>

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5 MathML