Methods for Creating Links
What Is a Link?
Links (or hyperlinks) are one of the most fascinating innovations the web has to offer. In fact, they've been around since the very beginning of the web and allow us to connect our documents to any other document (or resource), link to specific parts of documents, and make applications accessible via a simple web address. Almost any web content can be turned into a link, so that a single click will cause the browser to load another web address (URL).
In this chapter, we'll focus on creating links. Without links, the World Wide Web wouldn't exist — which shows just how important they are.
Fortunately, links are very easy to create, and this is done using the a (anchor) tag.
There's sometimes confusion around the link element, as at first glance it may seem like the right choice for creating a link.
But that's not the case. The link element is used to request an external resource needed for the proper functioning of a site, as in the example below:
<link href="style-sheet.css" rel="stylesheet">In fact, creating a link is done using the a element, inside which is the text that will be turned into a link, as shown below:
<a>This text is now a link!</a>To become functional, a link must have a series of attributes. The most important attribute, which tells the browser what page to open after the user clicks the link, is the href attribute.
A fun fact: many authors who've worked for years don't know that the name of this attribute comes from "Hypertext Reference".
☞ A URL can point to HTML files, text files, images, documents, video and audio files, and anything else that can be transmitted over the web. If the browser doesn't know how to display or handle the file, it will ask whether you want to open the file (in which case the responsibility is passed to a suitable native app on your device) or download it (to use later).
Below you can see an example of a link with several attributes:
<a href="https://www.example.com" title="Link Example" target="_blank" rel="next">Link Example</a>Let's look at some of the most commonly used attributes:
The target Attribute
- _blank
- _parent
- _self
- _top
- framename
This attribute is used to specify where the referenced document will be displayed.
The rel Attribute
- alternate
- author
- bookmark
- download
- help
- license
- next
- nofollow
- prefetch
- prev
- search
This attribute describes the relationship between the target object and the linked object. For example, a link with the rel attribute set to next indicates that the link is part of a series and will redirect to the next item in that sequence.
The title Attribute
This is a global attribute that provides additional information about the link. The title appears as a tooltip when the mouse hovers over the link.
Links vs. Hyperlinks
Although they look the same, there's a subtle distinction between the two terms.
A link is simply a chain that connects pages across websites — without links, there would be no websites at all. Take “https://google.com” for example. When you enter this address in the browser's address bar, you're taken to Google's website. A link is nothing more than a web address or URL of a webpage that allows you to connect to different servers. Links are used to connect one page to another, and the behavior and appearance of a link can be specified using various attributes and CSS. The appearance of a link can change to a hand icon (a GUI indicator) to signal that it's clickable.
A hyperlink is a link that takes you from one domain to another using references called anchor text. If I created a link on my site to Google (with the anchor text “Visit Google”), that would be a hyperlink. The web is made up of an infinite number of pages filled with all kinds of content and information, and the hyperlink is the tool that connects those pages together.
Links can be divided into internal and external links. An internal link connects two pages within the same site (on the same domain), while an external link is used to connect two web pages that belong to different websites.
☞ Simply put, hyperlinks are used to navigate between web pages on the same or different sites, while links are just web addresses.
Types of Links
There are two main types of links: relative links and absolute links.
Relative Links
Relative links are used to create connections within the same website. The value of the href attribute will contain only the page name, or the directory and page name. For example, if you have a site with 3 pages in the same directory (at the same level), let's say home.html, services.html, and contact.html, you can create a relative link from the "Home" page to "Contact" like this:
<a href="contact.html">Contact</a>You could also use an absolute link, but it's not recommended in this case.
Absolute Links
Absolute links contain more information and are links that include the full path to the destination page, including the protocol (Hypertext Transfer Protocol) http or https:
<a href="https://google.com" target="_blank">Visit Google</a>The target="" attribute with the value _blank is used to open the link in a new tab or window.
Fragment Identifiers
A fragment identifier is a short string that refers to a resource that is subordinate to a primary resource.
In principle, fragment identifiers are used to create links between different sections of the same page.
Normally, when you add a fragment identifier to an anchor, you write HTML code that maps the section of the page using the attribute, such as href="#Identifier-1" pointing to the HTML element with the correct ID, id="Identifier-1".
Email Links
It's possible to create links or buttons that open an email client. This is done using the <a> element and the mailto value for the href attribute.
In its basic and most commonly used form, a mailto: link specifies the recipient's email address.
For
example: Send an email to nowhere@gmail.com
<a href="mailto:nowhere@gmail.com">Send an email</a>In fact, the email address is optional. If you use just “mailto:”, a new window will be opened by the user's email client, without a predefined recipient: Send an email to any address you choose
<a href="mailto:">Send an email to any address you choose</a>