Create Links

Introduction

Links are what make the web connected. A link lets a visitor move from one page to another, visit an outside website, send an email, or call a phone number. In HTML, links are created with the <a> element, often called an anchor element.

In this lesson, you will add several types of links to a simple personal website. You will practice writing the link text, choosing the destination, and using the correct URL format.

A good link clearly tells users where it will take them or what action it will perform.

The Basic Link

A basic link has an opening <a> tag, an href attribute, link text, and a closing </a> tag. The href value contains the destination.

<a href="about.html">About Me</a>

The browser displays About Me as clickable text. The destination is stored in href, which means “hypertext reference.”

Four Useful Types of Links

1. Internal links

An internal link connects pages in the same website. If your project contains index.html and about.html in the same folder, use a relative path:

<a href="about.html">Read about me</a>

A link back to the home page might look like this:

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

The file name must match exactly. On some systems, About.html and about.html are different file names.

2. External links

An external link goes to another website. Include the complete address, including https://.

<a href="https://www.example.com">Visit Example</a>

Without the protocol, the browser may treat the address as a file in your own project instead of as an outside website.

3. Email links

An email link opens the visitor’s default email application with a recipient already filled in. Use mailto: before the email address.

<a href="mailto:hello@example.com">Email us</a>

Email links are convenient, but they may not work as expected if the visitor has not configured an email application.

4. Telephone links

A telephone link allows visitors to tap a phone number on a mobile device and start a call. Use tel: before the number.

<a href="tel:+15551234567">Call us</a>

Use a complete number when possible. The visible text can be formatted for readability, while the href uses a dialing-friendly format.

Worked Example

Imagine that your website has a home page, an about page, and contact information. The following navigation and contact section includes all four link types:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="https://developer.mozilla.org">Learn HTML</a>
</nav>

<h2>Contact</h2>
<p><a href="mailto:hello@example.com">Send an email</a></p>
<p><a href="tel:+15551234567">Call (555) 123-4567</a></p>

The first two links point to files in the same project. The third points to an external website. The final two links use special protocols for email and telephone actions.

Guided Activity: Build a Contact and Navigation Area

1. Open your project folder and confirm that it contains index.html. If you have another page, such as about.html, keep it in the same folder.

2. Inside the <body> of index.html, add a navigation area:

   <nav>
     <a href="index.html">Home</a>
     <a href="about.html">About Me</a>
   </nav>

3. Below the navigation, add an external link to a website you trust:

   <p><a href="https://www.example.com">Visit a useful website</a></p>

4. Add an email link. Replace the example address with an address suitable for your project:

   <p><a href="mailto:you@example.com">Send me an email</a></p>

5. Add a telephone link using a fictional or approved number if you are publishing your project:

   <p><a href="tel:+15551234567">Call me</a></p>

6. Save the file and open it in a browser. Test each link. Return to your page after testing external, email, or telephone links.

Common Mistake

A frequent error is placing the destination outside the href attribute or forgetting quotation marks.

<!-- Incorrect -->
<a href=about.html>About</a>

<!-- Correct -->
<a href="about.html">About</a>

Another common problem is using the wrong file name. Check spelling, capitalization, and file location. If an internal link does not work, compare the href value with the actual file name.

Independent Challenge

Create a small “Useful Links” section for your website. It must include:

• One internal link to another page in your project.

• One external link to a useful website.

• One email link with clear link text.

• One telephone link.

Use descriptive text such as Read my About page or Send a message instead of vague text such as Click here. Test every link and fix any destination that does not work.

Quick Review

• Use <a href="..."> to create a link.

• Use a relative file path for an internal link.

• Use a complete https:// address for an external link.

• Use mailto: for email and tel: for telephone links.

• Write link text that explains the destination or action.