HTML Text Link ( HTML anchor )

/

Introduction

HTML text links, also known as anchors, are fundamental building blocks of the web. They allow users to navigate between pages, access resources, and interact with web content. HTML text links are created using the tag, which stands for anchor. When a user clicks on a link, they are redirected to the destination URL specified in the anchor tag’s href attribute.

Links can be styled using CSS to enhance their appearance and provide visual cues to users. With proper use of text links, website navigation becomes intuitive and seamless, improving the overall user experience. Let’s explore the various aspects of HTML text links and how they contribute to the interconnected nature of the internet.

Let’s dive deep into how they work and how to use them effectively.

The fundamental structure of an HTML link is:

<a href="https://techtutorialsonline.com/">Click here</a>
  • <a>: This is the anchor tag. It defines the start and end of the hyperlink.
  • href: This attribute, which stands for “Hypertext Reference,” specifies the URL of the page the link goes to. It can be an absolute URL (like https://techtutorialsonline.com/) or a relative URL (like /about.html).
  • The text between the opening and closing tags is called the anchor text. This is what users see on the page and can click on.

Title Attribute

<a href="https://www.dogs.com" title="Learn about different dog breeds">Dog info</a>

The title attribute provides additional information about the link. It appears as a tooltip when a user hovers over the link. This can be useful for providing more context or description about the link’s destination.

Target Attribute

<a href="https://www.birds.com" target="_blank">Bird watching (opens new tab)</a>

The target attribute specifies where to open the linked document. _blank opens the link in a new tab or window. Other values include:

  • _self: Opens in the same frame (default)
  • _parent: Opens in the parent frame
  • _top: Opens in the full body of the window

Rel Attribute

<a href="https://www.example.com" rel="nofollow">Example Site</a>

The rel attribute specifies the relationship between the current document and the linked document. nofollow tells search engines not to follow this link when ranking pages. Other common values include:

  • noreferrer: Prevents the browser from sending the referring webpage’s address
  • noopener: Prevents the new page from being able to access the window.opener property