Link Markup

A link (or hyperlink) is a way to connect one webpage to another. Links also allow users to jump to a different section of a webpage, download documents, and more. To distinguish them visually from other webpage content, textual links are usually given a distinctive appearance, using color (typically blue for a link that has not yet been visited), special text formatting, or both.

Links are represented in HTML by the <a> (or anchor) tag. The <a> tag is one of those HTML tags that can include a number of attributes.

In this case, the link takes users to a page on a different website, so we need to include the attribute href, for hypertext reference. The value of the href attribute is the URL (Uniform Resource Locator) of the destination—the page you’re linking to. The enclosed content of the <a> element is typically some label text—usually the name of the page the link will take the user to. This label is the only part of the link that the user sees.

Let’s see how to set up the markup for a link to Google.

To create a hyperlink:

1. In your HTML file, type <a to start the anchor element.

2. Type href="https://google.com"> to define the destination of the link.

3. Type Visit Google to provide a label for the user to click.

4. Type </a> to finish the link (FIGURE 5.1).

   

5. Save the file and view it in your browser (FIGURE 5.2).

   

While the markup for a link may look straightforward, there are several nuances to creating links. Key to creating links is understanding how URLs are structured.

URL Structure

At this point, it’s worth taking a closer look at URLs. In FIGURE 5.3, you’ll see the components of a common URL.

URLs are made up of these sections:

• The protocol (either http or https).

• The subdomain (optional).

• The name of the website.

• The top-level domain (or TLD). This is also known as the extension.

To link to a specific file within a site, you need to provide these items as well:

• The path (folder hierarchy) containing the file.

• The file name.

In order to reach a website at all, you need to provide at least these three parts of the URL: the protocol, the name, and the TLD. Paths, subdomains, and file names need to be included only when you want to reach those specific areas of the website.

Ultimately, where a link sends your users is based on what kind of URL—or how much of the URL—you include.

First, let’s look at how linking to pages within your website compares with linking to pages outside your website.

Internal vs. External Linking

This concept is pretty clear. Internal links are links to pages within your own website (or on the same domain). External links are links to someone else’s webpage.

As far as markup goes, internal and external links use exactly the same structure, except (as you’ll learn later in this chapter) external links are always absolute. That is, they need to include the entire URL, including the protocol. If one of those items is missing or incomplete, the link will not work.

If you’re linking internally, there’s something else to consider: you don’t always need to include the entire URL, because it’s implied. This is the result of the difference between absolute and relative links.

Relative vs. Absolute Linking

Back in Chapter 2, you learned about file structures and how websites are organized (FIGURE 5.4). You also saw how URLs incorporate part of a file’s directory structure. When we talk about relative versus absolute linking, we’re talking about how much of the URL and directory structure we want to include.

With an absolute link, you include the entire URL in the anchor element markup. Always use an absolute link when linking to an external site, but you'll usually use relative links for files on your own site.

Say you want to link to a specific file called cart.html on the website mysite.com. You’ll need to know the location of the file in the site’s directory structure to link to it. If cart.html is in a top-level folder (i.e., a folder in the root directory) called /store/, then the absolute link for this file is https://mysite.com/store/cart.html.

Relative links, on the other hand, don’t include the complete URL of the location you’re linking to. The structure of the link markup is based only on where the linked file is relative to the current file. So relative links are commonly used to link within pages on a single website, whose files share one common directory.

There are several different types of relative links we can create, as shown in TABLE 5.1.

• Same folder: The linked file is in the same folder as the linking file. The relative link would just be the file name (e.g., file.html).

• Child folder: The linked file is one folder down from the linking file (in other words, in a folder contained in the linking file’s folder). The relative link starts with a forward slash (/), then includes the folder name, another forward slash, and the file name (/folder-name/file.html).

• Parent folder: The linked file is one folder up from the linking file. The relative link would be two periods and a forward slash (../) and then the file name (../file.html).

  These patterns can be repeated for any number of folders. So if a file is three folders up from the current file, the relative link would be ../../../file.html. And there can be great-, great-great-, great-great-great-grandchildren, and so on.

Looking at our example website again, to make a link from the home page (mysite.com/index.html in the root directory) to cart.html, you could use a relative link. Since cart.html is in the child folder /store/, we could link to it using a relative path: /store/cart.html.

To create a relative link:

1. In your website folder on your computer, create a new folder called images.

2. Go to unsplash.com and download any image you’d like. Save it into the images folder you just created and name the image file unsplash.jpg.

3. In the website folder, make a duplicate of the file boilerplate.html and rename the new file 5.html.

4. Open the file 5.html.

5. Right after the opening <body> tag, type <a href=".

6. Type /images/unsplash.jpg">.

7. Type Check out this image!.

8. Type </a>.

9. Save the file and open it in your browser.

10. Click the link to display the image in the webpage.

Other Types of Links

Aside from internal and external links, here are two other types of links you can add to a webpage. You can link to a specific section of a page, and you can link to other applications, like email.

<a href="mailto:[email protected]">
→Email Joe</a>

Link Targets

Before we wrap up the chapter, there’s one more attribute you should know about, and that’s target.

You’ve likely browsed websites on which the links opened in new tabs or windows. A common reason is that the webpage author hopes the user will close the new tab when they’re done and return to their site.

That’s achieved by using the target attribute and the value blank. For example, to open casabona.org in a new tab, use this link:

Click here to view code image

<a href="https://casabona.org"
→target="_blank">Link that opens in a
→new tab</a>.

To create a link that opens in a new window:

1. In your HTML file, type <a href= "https://google.com".

2. Type target="_blank">.

3. Type Visit Google</a>.

4. Save the file.

5. Open the file in your browser and click the link to see it open the home page of google.com in a new window.

While it’s considered best practice to open links in the same window, there might be legitimate reasons to send the user to a new window. If you do decide to open links in new windows, you should at least let the user know what to expect. You can do so by adding simple text (like “new window”) to the link label or by adding an icon, as shown in FIGURE 5.5.

Wrapping Up

With your knowledge of formatting, organization, and now linking, you’re ready to move into the structure and layout side of HTML.

In the next chapter, you’ll learn about the building blocks that are used to lay out a webpage.