HTML Links
<!DOCTYPE html>
<html>
<head>
<title>Websites</title>
</head>
<body>
<h1>HTML Websites</h1>
<p>Try <a target="_blank" href="https://www.quackit.com">Quackit</a> for starters.</p>
</body>
</html>
The above link is an example of a hyperlink. A hyperlink is a link that allows the user to navigate to another resource (such as a web page) or download it (such as in downloading a file). In this case, we link to another web page.
How Hyperlinks Work
A hyperlink is created by using the <a>
tag along with the href
attribute, which is used to specify the destination URL. Like this:
<a href="https://www.quackit.com">Quackit</a>
The <a>
tag has a start and end tag. Any text or element between the start and end tag becomes the "clickable" part. You'll notice that most web browsers will display hyperlinked text in a different color and underlined. However, as with any HTML element, you do have control over how the link is styled by using CSS (we'll get to that soon).
As you can see from the top example, you can place links inline within the text—no need to place it on a new line or anything.
And you can link to any web page or document you like. There's no need to do anything on the destination page. Therefore, you can link to someone else's website without them even knowing. This is why there are so many links on the web!
Attributes
As well as the href
attribute, the <a>
tag also accepts other attributes. For example, the target
attribute allows you to specify which frame, or browsing context, to load the destination page in.
Or for another example, the download
attribute can be used to specify that the link is for downloading a resource (such as a file).
And, as with any other element, you can also use any of the global attributes. For example, you could use the title
attribute to provide a "tool tip" type description of the destination web page.
And again, as with any other element, you can also use any of the event handler content attributes.
To see a full list of attributes that you can use with this tag, here's more information about the <a>
element.
About URLs
URL (which stands for Uniform Resource Locator) is the location of a resource on the web. This is usually a web page, image, or some other file. Many non-technical people call this the web address
.
When creating a hyperlink, you can use either an absolute URL or a relative URL.
Absolute URLs
An absolute URL is a URL where the full path is included. Here's an example of an absolute URL:
http://www.quackit.com/html/index.cfm
This includes the protocol (eg, http://
), the domain name/sub-domain (eg, www.quackit.com
), and the full path to the actual resource (eg, /html/index.cfm
).
Relative URLs
A relative URL on the other hand, only contains some of the path. This is because the path is relative to an implied absolute URL. The page in the previous example could also be linked to with any of the following:
index.cfm
html/index.cfm
../html/index.cfm
The one you use would depend on where the current page is located (i.e. the page that you are linking from). Here's an explanation:
- index.cfm
- To use this URL, your code would look like this
href="index.cfm"
. This requires that your linking page is in the same directory thatindex.cfm
is located in. - html/index.cfm
- To use this URL, your code would look like this
href="html/index.cfm"
. This requires that your linking page is one directory aboveindex.cfm
. The path shows thatindex.cfm
is located inside thehtml
directory. - ../html/index.cfm
- To use this URL, your code would look like this
href="../html/index.cfm"
. This requires that your linking page is in a directory that's at the same level as thehtml
directory. The two dots and forward slash (../
) indicate that you intend to move back one level, then into thehtml
directory to theindex.cfm
file.
Although relative URLs can be shorter and easy to code, they can become broken very easily if you decide to move a page, do a major redesign, etc. Therefore, I don't normally recommend using them.
Root Relative URLs
Root relative URLs are a different story. A root relative URL always starts with a forward slash (/
) and this indicates that it is relative to the website's root directory. The URL always consists of the full path from the website's root. Therefore, no matter where your linking page is located, you always use the same URL.
So we could use the following code no matter where our linking page is (as long as it's on the same website):
/html/index.cfm
To use this URL, your code would look like this href="/html/index.cfm"
.
Which One to Use?
I recommend using either root relative URLs or absolute URLs when linking to pages on the same website as the linking page.
When linking to external web pages (i.e. pages that are not on the same site as the linking page), you'll need to use absolute URLs. This is because you'll need to provide the domain name of the website that hosts the destination page.
Linked Images
You can link images in just the same way that you can link text. Simply insert the image code between the start and end <a>
tags.
We'll be covering images next, so you'll be able to try this out!
Other Link Types
I should mention that HTML includes another type of link: Links to external resources.
Links to external resources are not normally seen by the user. Instead, they are typically used by the browser to augment the current document. For example, you could link to an external style sheet document that can be used to provide styles for the current document.
This type of link is achieved using the <link>
element.
We'll be covering style sheets soon.