Understanding Hyperlinks

Before we dive into the technicalities, let's start with an analogy. Imagine you're reading a book, and you come across a term you aren't familiar with. Now, what if you could just touch that word and instantly be transported to a section that gives you a detailed explanation about it? Wouldn't that be wonderful? This is exactly what hyperlinks do on a webpage.

Hyperlinks, or simply links, are references to data that the reader can directly follow either by clicking or by hovering. They are used extensively on the web to navigate from one page to another.

Breaking Down an HTML Hyperlink

The primary tag for creating hyperlinks in HTML is the <a> tag. This is typically used in conjunction with the href attribute, which stands for Hypertext REFerence. You can think of the href attribute as the destination address of the hyperlink.

Here's an example of a basic HTML hyperlink:

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

In the above example, the text "Visit Example.com" is what users see on the webpage. When they click on this text, they will be taken to "https://www.example.com".

Linking to Different Types of Resources

Hyperlinks can link to different types of resources, not just other web pages. These include:

Web Pages: As shown in the example above, you can link to other web pages by providing the URL in the href attribute.

Email Addresses: To create a link that opens the user's email program to let them send a new email, use the mailto: scheme:

html <a href="mailto:example@example.com">Send an email</a>

Telephone Numbers: Similarly, you can use the tel: scheme to create a link that dials a number on the user's phone or VoIP application:

html <a href="tel:+1234567890">Call us</a>

File Downloads: If you want to link to a file that the user can download, simply provide the path to the file in the href attribute:

html <a href="/path/to/file.pdf">Download the PDF</a>

Relative vs Absolute Links

When creating links, it's important to understand the difference between relative and absolute links.

Absolute links are like the full address of a location, including the street, city, state, and country. They are used when linking to a page on a different website. For example:

<a href="https://www.example.com/page.html">Link to a page on Example.com</a>

Relative links, on the other hand, are like directions from your current location. They are used when linking to pages within the same website. For example:

<a href="/page.html">Link to another page on the same website</a>

Adding Styles to Links

You can add styles to your links to make them more visually appealing or to indicate their state. The four states of a link are:

1. a:link: This is the default state of a link when it has not been clicked or visited yet.
2. a:visited: This state applies to a link after it has been clicked or visited.
3. a:hover: This state applies to a link when the mouse pointer is placed over it.
4. a:active: This state applies to a link at the moment it is being clicked.

Here's an example of how to style links in different states using CSS:

<style>
a:link { color: green; }
a:visited { color: red; }
a:hover { color: blue; }
a:active { color: yellow; }
</style>

With the above CSS code, the link will be green by default, turn red after it's been visited, turn blue when hovered over, and yellow when it's being clicked.

Wrapping Up

Hyperlinks are a fundamental part of HTML and the web as a whole. They allow us to navigate between pages and access various types of resources. As you continue to learn and practice HTML, take the time to experiment with hyperlinks and their various attributes and states to create more interactive and user-friendly web pages.