HTML Hyperlink

Introduction

Hyperlinks, often referred to simply as links, are essential elements in web development. They allow users to navigate between different web pages, enhancing the overall browsing experience. In HTML, hyperlinks are created using <a> and </a> tags, which stands for "anchor". Here's is the deeper look at hyperlinks:

Source: https://www.semrush.com/blog/html-a-tag/

Creating Hyperlinks

To create a hyperlink, use the <a> element and set the href attribute to the desired URL. Optionally, you can include additional attributes like target to specify how the linked page should open.

Different values for the target attribute:

• _self: Load the URL into the same browsing context as the current one. This is the default behavior.
• _blank: Load the URL into a new browsing context. This is usually a tab, but users can conifgure browsers to use na windows instead.
• _parent: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self.
• _top: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as _self.

Types of Hyperlinks

• Absolute: Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: protocol://domain/path. An absolute link will always contain the protocol and domain of the destination.
• Relative: Links to other pages within our own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page we created the link on. Relative links only include the file path to the other page, relative to the page you are creating the link on.

Example code:

 
<a href="https://wwww.google.com">Go to Google</a>


<a href="lesson1.html">Lesson 1</a>

Hyperlink Colors

As defaults hyperlinks can have different visual states to indicate their status.

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