HTML links

HTML links, or hyperlinks, are elements in a web page that users can click on to navigate to another web page or resource. They are created using the <a> (anchor) tag in HTML. Here is a basic example:


<a href="https://www.abc.com">Visit Example</a>

In this example:

  1. The <a> tag defines the link.
  2. The href attribute specifies the URL of the page the link goes to.
  3. The text between the opening and closing <a> tags (“Visit Example”) is the clickable part of the link.

Attributes of the <a> Tag

  1. href: Specifies the URL of the page the link goes to.
  2. target: Specifies where to open the linked document (e.g., _blank for a new tab/window, _self for the same frame, _parent for the parent frame, _top for the full body of the window).
  3. title: Provides additional information about the link, often shown as a tooltip when the mouse hovers over the link.
  4. rel: Specifies the relationship between the current document and the linked document (e.g., nofollow, noopener, noreferrer).

Example with more Attributes


<a href="https://www.abc.com" target="_blank" title="Visit Example" rel="noopener noreferrer">Visit Example</a>

Types of Links

  1. Absolute URLs: Full web addresses (e.g., https://www.abc.com/page1.html).
  2. Relative URLs: Links relative to the current page (e.g., page2.html, ../images/pic.jpg).
  3. Email Links: mailto: followed by an email address (e.g., mailto:someone@example.com)

Linking to a Specific Part of a Page

You can also link to a specific part of the same or another page using an anchor. This is done by setting an id on the target element and linking to it with a # prefix:


<!-- Target element with an id -->
<h2 id="section1">Section 1</h2>

<!-- Link to the target element -->
<a href="#section1">Go to Section 1</a>

External Links vs. Internal Links

External Links: Point to a different website (e.g., https://www.google.com).

Internal Links: Point to a different page on the same website (e.g., about.html).