Hyperlinks, or just "links", are what make the web a web. They connect countless pages and resources, making the internet a navigable, interlinked universe. Without hyperlinks, we would be left manually entering URLs, a cumbersome process for anyone seeking information swiftly and efficiently.

The concept of interconnected information originated in the 1940s with Vannevar Bush, who imagined a vast "network of information". However, it wasn't until 1989 that Tim Berners-Lee, best known as the inventor of the World Wide Web, the HTML markup language, the URL system, and HTTP,implemented hyperlinks as a fundamental component of the World Wide Web, revolutionizing how we access information.

The most classic examples of hyperlinks are Google and Wikipedia, where users can freely click on links they wish to view, searching for content that interests them or is helpful. Hyperlinks simplify the process, as one only needs to click on the marked elements to navigate to the relevant pages.

---

Detailed Use of Hyperlinks in Web Development

The Anchor Elements

Linking to relative URLs

The most common way to create a hyperlink is using the HTML anchor tag <a>. The element starts with "<a,” ends with “>/a>.” And contains various attributes that make up the full tag. This tag includes several key attributes:

• href: Specifies the URL of the page to which the link goes, which is the core feature of an anchor tag. The URL can be an absolute URL or a relative URL.

  <a href="./cats/cutecat.jpg">Google</a>
  <a href="/en-US/docs/Web/HTML">Wikipedia</a>

• title: Offers additional information about the link when the user hovers over it. (try to hover this~)
• target: Decides whether the linked document opens in a new window or the current one. For example: This tag creates a link that, when clicked, opens "www.example.com" in a new tab, allowing the user to keep the original page open.

As I have shown at the beginning, I just wrap the "Google" and the Wikipedia in anchor tags like this:

<a href="https://www.google.com" title="jump to Google" target="_blank">Google</a>
<a href="https://en.wikipedia.org/" title="jump to Wikipedia" target="_blank">Wikipedia</a>

Linking to an element on the same page (Anchor Tag)

All of the above are standard uses of the 'a' tag, which directs to external pages, allowing us to navigate between web pages. Another very common use of the 'a' tag is for in-page title navigation. We simply need to include the '#' symbol in the href attribute, followed immediately by the id value of another element, to easily achieve in-page title navigation.

This type of a elements are also called "Anchor Tag"

The anchor tag is essentially a tag that you can attach to a word or a phrase (exactly like you would a normal internal or external link), except it brings readers down to a different section of the page as opposed to another webpage. You're essentially creating a unique URL within the same page when you use this tag.

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>
<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

There are really three main benefits when it comes to using the anchor tag:

1. No Scrolling. The biggest benefit to the anchor tag is not forcing your visitors to scroll down tons of information to find a particular section. This can get daunting, and depending on just how much content is on the page, it can be very difficult to find a certain section amidst all the content.
2. Organization. This helps webmasters keep things in order. Instead of having to create several different webpages or splitting up a document, you can keep it all in one place.
3. Search Engine Use. Google sometimes uses this tag to help send a user to a specific section of your webpage, which helps make things easier for users.

Linking Images

Hyperlinks can also be used to make images clickable, using the <a> tag wrapped around an <img> tag:

Here, clicking the image sends the user to the specified URL. This is particularly useful in web design for logos and navigational graphics.

Above is an example for a img element wraped by a a element,you can just click the image and then you will jump to the source of the cat image

Background Images

CSS can be used to link background images which are not clickable but enhance the aesthetic of a webpage. The CSS property background-image is used to assign an image to the background of an element:

The biggest feature of background-image is that they are interpreted by the browser as the background, so they cannot be "selected". Normal img tags, whether or not they are wrapped in an a element, can be selected by the cursor. However, if we do not want the image to be selectable, but instead want it to quietly serve as a background, it is best to use background-image in CSS

It is quite easy to use background-image in CSS, all you need to do is just select the element you want to embed an image in by the CSS selector, and then put the URL of the image in the url function of background-image attribute. Like this: element{background-image:url(https://picture.jpg)}

This is an example of background image of an element

---

How Browsers Parse and Process Hyperlinks

URL Parsing

When a hyperlink is clicked, or try to render the image with href the browser first parses the href attribute of the anchor tag to determine the destination URL and try to get the resources refered by the URL. It checks the validity of the URL and prepares to initiate a network request.

DNS Lookup

The browser performs a DNS lookup to convert the domain name into an IP address. This step is crucial as it tells the browser where to send its request. Typically, a DNS lookup is only needed once for each hostname during a webpage load. However, if a page includes resources like fonts, images, scripts, ads, and analytics from multiple hostnames, each unique hostname requires its own DNS lookup.

HTTP Request

Once the browser knows the server's IP address, it sets up a connection using a TCP three-way handshake, a process often called "SYN-SYN-ACK" because it involves three steps: SYN, SYN-ACK, and ACK, and ACK for SYNchronize, SYNchronize-ACKnowledgement, and ACKnowledge respectively. This ensures the browser and server can communicate securely, often over HTTPS. For secure connections, a TLS negotiation follows, determining the encryption methods before any data transfers. This includes multiple steps like clienthello, serverhello, and verifying certificates, taking several round trips, which adds time but secures the data being transmitted. After completing these steps, the browser finally sends the request for the webpage. It sends an HTTP GET request to the server associated with the IP address. The GET request specifies the path to the resource that needs to be fetched.

Server Response and Rendering

The server receives the request, processes it, and sends back the requested page along with associated resources like images, scripts, and CSS files. The browser then renders the page for the user to view. This entire process, from click to display, typically happens within a few milliseconds, thanks to modern internet infrastructure.

---

Using Hyperlinks for Improved User Experience

Developers can enhance user experience by strategically using hyperlinks to guide users through a website, create engaging interactions, and facilitate easy navigation. For instance, navigation menus are often built with lists of hyperlinks, and call-to-action buttons are implemented using anchor tags styled with CSS to draw attention and encourage clicks.

Moreover, AJAX (Asynchronous JavaScript and XML) can be used in conjunction with hyperlinks to load new content without a full page reload, keeping the user on the same page but updating parts of it dynamically. This is commonly seen in online forms, search results, and social media feeds.

Actually, both the scroll-to-load and the button-click-to-load-new-images functions work by using JavaScript to send requests, and then updating the DOM once the data is received, thereby refreshing the elements. I think I've demonstrated enough already. But let's try one more thing: below is a button that, when clicked, will display a joke

Make me a joke please

---

Conclusion

Hyperlinks are fundamental to the fabric of the web. They not only enable the vast interconnectedness of information but also enhance the efficiency and aesthetics of digital navigation. Understanding the technical aspects of hyperlink implementation and the processes involved in their execution provides developers with the tools to create more dynamic, user-friendly websites.

With ongoing advancements in web technology and standards, the role and functionality of hyperlinks continue to evolve, offering new and innovative ways to access and interact with content online. As we look to the future, the potential for hyperlinks to integrate more deeply with emerging technologies suggests a continuing evolution of the internet's navigational capabilities.

This comprehensive exploration of hyperlinks, from technical specifics to practical applications, underscores their critical role in web development and highlights the sophistication behind what appears to be a simple click.