Hyperlinks in HTML are integral to the function of the internet, linking documents and webpages together. They are created in the HTML language using anchor tags:
<a></a>
The key attribute that the anchor tags use is the href which defines where the user is directed when clicking on the link.
A simple hyperlink would look like:
<a href="https://www.example.com">Visit Example</a>
They generally surround text for hyperlinks in paragraphs, but you can wrap any element in an anchor tag to turn it into a link. This is especially useful for website brands, where you can wrap the image element of the logo in an anchor tag, turning that image into a hyperlink to your homepage.
Links, in my experience, have five main use cases:
-
Absolute links that direct the user to a specific website by using the full URL.
<a href="https://www.example.com">Visit Example</a> -
Relative links that lead to a page within the same website without needing the full URL.
<a href="/about.html">About Us</a> -
Relative links to elements on the same page. A good example of this is contents sections on this site that
scroll to the respective part of the page when clicked. Having
href="#"would take you to the top of the current page.<a href="#idname">Go to the element with id “idname”</a> -
Email links that open the user's chosen email client and prefill the recipient's address. However in my
experience this generally opens a never-used-before email app on windows that takes a long time to load and
creates a poor user experience.
<a href="mailto:someone@example.com">Send an Email</a> -
Phone call links that allow users to dial a number on mobile devices.
<a href="tel:+1234567890">Call Us</a>