HTML Links

HTML Links (also known as Hyperlinks) allow users to move from one Web resource to another. A link is defined with the <a> tag, a destination url is specified inside the href attribute. And a text, image or any other HTML element is placed between <a> and </a> tag like ─

Example Try this Code
<a href="https://egtutorial.com/">Eg Tutorial</a>
<a href="/">
  <img src="logo.png" alt="Logo">
</a>

Description:

The href attribute specifies the destination address (https://egtutorial.com/) and the link text (Eg Tutorial) is the visible part of this element. This part also can be an image, that’s why <img src="logo.png" alt="Logo"> represents as a link. When click on the link will send you to the specified address immediately.

By default, most of the browsers will display the links with underlined text and colors like ─

  • An unvisited link with underlined and blue color.
  • A visited link with underlined and purple color.
  • An active link with underlined and red color.
Tip: To understand hyperlink, hover your mouse over an image or text, the cursor will be converted to hand ).

The target Values of HTML Links

The target attribute tells the browser where to open the linked document.

Target Value Description
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame. This is default.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
framename Opens the linked document in a named targetframe.

To make it more clear to you, I provided an example below with all target values ─

Example Try this Code
<p>Click on the following links to see the result</p>
<a href="/" target="_blank">In New Tab</a> |
<a href="/" target="_self">In Same Frame</a> |
<a href="/" target="_parent">In Parent Frame</a> |
<a href="/" target="_top">In full Body</a> |
<a href="/" target="demo">In a Named Frame</a>

Create a Bookmark Anchor

The destination anchor of a link can be specified with a name or an id attribute so that readers can jump to the specific parts of a Web page clicking on the link.

Bookmark with an id Attribute

Example Try this Code
<h1 id="top">I am on top</h1>
<p>a lot of text...</p>

<a href="#top">Go to top</a>

Bookmark with a Name Attribute

Example Try this Code
<h1 name="top">I am on top</h1>
<p>a lot of text...</p>

<a href="#top">Go to top</a>