facebook twitter
Webucator's Free HTML Training Tutorial

Lesson: HTML Links

Welcome to our free HTML Training tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

The ability to link from one page to another is what makes HTML hyper. Calling it Hypertext, however, is a bit of a misnomer, as images and other elements can also be linked.

Lesson Goals

  • Learn to create basic text links.
  • Learn the difference between absolute and relative paths.
  • Learn to create links that open in new windows.
  • Learn to create email links.
  • Learn to create links to specific locations on a page.

Text Links

The tag for a link is perhaps the least intuitive of all the HTML tags. It is <a> and it comes from the word "anchor," as <a> tags used to be used to create locations to link to, known as anchors, as well as the links themselves. By itself, the <a> tag does nothing. To create a link, it requires the href attribute, which takes as a value the path to the file or location to which to link. The syntax is as follows:

Syntax

<a href="path_to_file">Link Text</a>

For example:

<a href="bios/john-lennon.html">John Lennon</a>

Note that a elements may be direct children of the body element:

<body>
	<a href="https://www.webucator.com">Webucator</a>
</body>

But it is more common to include them in paragraphs or other page elements:

<body>
	<p><a href="https://www.webucator.com">Webucator</a></p>
</body>

Absolute vs. Relative Paths

Absolute Paths

An absolute path shows the complete path to a file starting from the web root. To illustrate this, see the following directory tree:Directory Tree

Assume that the wwwroot folder is the web root. This means that when a user types http://www.example.com/index.html, the index.html page within the wwwroot folder will be downloaded to the browser. The absolute path to the web root from a page on the same domain is simply a forward slash (/). So, given the folder structure shown above, a link on company.html to index.html could be written like this:

<a href="/index.html">Home Page</a>

The same link could be placed on any page in any folder below the wwwroot folder or on any page in the wwwroot folder itself.

Using an absolute path, a link to company.html would include the about directory, like this:

<a href="/about/company.html">About Our Company</a>

External Links

When linking to a file at a different domain you must identify the location of the domain using the domain name (or IP address) of the site. To illustrate, assume that the directory structure shown above is found at http://www.example.com. A link to company.html from another site would be written like this:

<a href="http://www.example.com/about/company.html">About the Beatles</a>

See Links/Demos/links.html for more examples of links with absolute paths.

Relative Paths

Relative paths can only be used to link to other files under the same web root. A relative path indicates where a file is relative to the file that contains the link. The folder (or directory) that contains the file being worked on is called the current directory. The relative path to another file that is also in the current directory is just the name of that file. For example, since company.html and contact.html are found in the same directory, they can link to each other simply by specifying the file name. The following shows a link that could be used in contact.html to company.html.

<a href="company.html">About Our Company</a>

The relative path to a file in a subdirectory of the current directory must include the name of the subdirectory. For example, to link to company.html from index.html you must first point to the about directory, like so:

<a href="about/company.html">About Our Company</a>

The relative path to a file in a directory above the current directory should begin with ../ For example, the following shows a link to index.html from company.html.

<a href="../index.html">Home Page</a>

See Links/Demos/links.html for more examples of links with relative paths.

Default Pages

The web server administrator can set up default page names to look for when a path ends with a directory name without specifying a file. Often these files are called index.html or Default.html. In this case, the following two URLs would be identical, both loading index.html.

http://www.example.com
http://www.example.com/index.html

Targeting New Windows

The target attribute is used to specify the browser window in which the linked page will open.

<a href="company.html" target="newwin">Our Company</a>

If there is no open browser window with the specified target name, a new window will be opened with that name. As long as that window stays open, future links with the same target value will target that window. To force each link to target a brand new window, use "_blank" as the value of the target attribute.

<a href="company.html" target="_blank">Our Company</a>

See Links/Demos/links.html for more examples of links with targets.

Email Links

Email links are used to open an email client to start a new email message. The syntax is similar to the links we have seen thus far. The value of the href attribute begins with mailto: and ends with an email address. For example:

<a href="mailto:paul@example.com">Email Paul</a>

It is good practice to include the email address as the text of the link, so that people who are printing the page or whose setup does not support email links can see the actual email address. For example:

Email Paul at <a href="mailto:paul@example.com">paul@example.com</a>.

See Links/Demos/links.html for more examples of links with email links.

Adding Links

Duration: 15 to 25 minutes.

In this exercise you will add links to index.html. The completed page should look like this:Welcome to Runners Home page

  1. Open Links/Exercises/index.html for editing.
  2. Add the following links:
    • Home: index.html
    • Races: races.html
    • Resources: resources.html
    • Calculator: calculator.html (should target "newwin")
    • Running Log: running-log.html
    • My Account: my-account.html
    • Log out: logout.html
    • the most up-to-date information on running races: races.html
    • the best resources for runners: resources.html
  3. Add an email link to info@runners-home.com after the copyright.
  4. Save your work and open your new page in a browser to test it.

Add links to resources.html to external resources.

  1. Open Links/Exercises/resources.html for editing.
  2. Add links to any useful resources for runners you can find on the web.

Solution:

Links/Solutions/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Runners Home&trade;</title>
</head>
<body>
<div>
  <a href="index.html">Home</a> |
  <a href="races.html">Races</a> |
  <a href="resources.html">Resources</a> |
  <a href="calculator.html" target="newwin">Calculator</a> |
  <a href="running-log.html">Running Log</a> |
  <a href="my-account.html">My Account</a> |
  <a href="logout.html">Log out</a>
</div>
<p>Hello, Stranger!</p>
<h1>Welcome to Runners Home&trade;</h1>
<p>
  Runners Home&trade; is dedicated to providing you with:<br>
  &#8226; <a href="races.html">the most up-to-date information on
  running races</a>.<br>
  &#8226; <a href="resources.html">the best resources for runners</a>.
</p>
<hr>
<p>&copy; 2020 Runners Home. All rights reserved.
For questions, send email to
<a href="mailto:info@runners-home.com">info@runners-home.com</a>.</p>
</body>
</html>

Solution:

Links/Solutions/resources.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resources</title>
</head>
<body>
<h1>Resources</h1>
<div>
  <a href="https://www.mapmyrun.com/">Map My Run</a><br>
  <a href="https://www.runnersworld.com">Runners World</a><br>
  <a href="https://strengthrunning.com/">Strength Running</a>
</div>
</body>
</html>

Targeting a Specific Location on the Page

Every HTML element can take an id attribute, which uniquely identifies that element on the page.

To target a specific location on the page, use the pound sign (#) followed by the id value of the element at that location as the href value of that link.

For example, assume you have an <h1> tag with the id of "john":

<h1 id="john">John Lennon</h1>

To target that location, use:

<a href="#john">Read about John</a>

You can also link to locations on other pages.

<a href="about.html#john">Read about John</a>

Or

<a href="http://www.example.com/about.html#john">Read about John</a>

The file below shows more examples.

Links/Demos/location-links.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Targeting Locations on a Page</title>
</head>
<body>
<h1 id="top">Targeting Locations on a Page</h1>
<h2>Links to Locations on Remote Pages</h2>
<div>
	<a href="https://www.runners-home.com/resources/terms.html#dnf">DNF</a>
</div>
<h2>Links to Locations on This Page</h2>
<div>
	<a href="#cinderella"
		title="CINDERELLA - the brothers Grimm">Cinderella</a><br>
	<a href="#alice" 
		title="A MAD TEA-PARTY - Lewis Carroll">A Mad Tea-Party</a><br>
	<a href="#naughtyboy"
		title="THE NAUGHTY BOY - H.C. Andersen">The Naughty Boy</a>
</div>
<hr>
<h2>Locations on This Page</h2>
<p>Each title below has an id attribute.</p>
<h3 id="cinderella">CINDERELLA - the brothers Grimm</h3>
<p>A rich man's wife became sick, and when she felt that her end was
	drawing near, she called her only daughter to her bedside and said,
	"Dear child, remain pious and good, and then our dear God will
	always protect you, and I will look down on you from heaven and be
	near you." With this she closed her eyes and died.</p>
---- C O D E   O M I T T E D ----
<hr>
<div><a href="#top">Back to top</a></div>
<hr>
<h3 id="alice">A MAD TEA-PARTY - Lewis Carroll</h3>
<p>There was a table set out under a tree in front of the house, and
	the March Hare and the Hatter were having tea at it: a Dormouse
	was sitting between them, fast asleep, and the other two were
	using it as a cushion, resting their elbows on it, and the
	talking over its head. "Very uncomfortable for the Dormouse,"
	thought Alice; "only, as it"s asleep, I suppose it doesn"t
	mind."</p>
---- C O D E   O M I T T E D ----
<hr>
<div><a href="#top">Back to top</a></div>
<hr>
<h3 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h3>
<p>Once upon a time there was an old poet-one of those good, honest
	old poets. One evening, as he was sitting quietly in his home, a
	terrible storm broke out-the rain poured down in torrents-but the
	old poet sat warm and cozy in his study, for a fire blazed brightly
	in his stove and roasting apples sizzled and hissed beside it.</p>
---- C O D E   O M I T T E D ----
<hr>
<div><a href="#top">Back to top</a></div>
</body>
</html>

The title Attribute

The title attribute can be used to provide a description about a link. The description is displayed by the browser as a tooltip. Screen readers might read the description to a blind user.

Here's an example:

<a href="https://www.webucator.com" title="Webucator Home Page">Webucator</a>

When you hover over this link, the title appears as a tip:Link with Title - hovered

This is especially useful when an image is actually a link (we'll find out how to do this later). It might not be clear from the image itself where the link points. The title attribute can be used to make the link destination clear.