HTML Tutorial / Links: Paths, Page Fragments, and Email

Create an HTML link with the a element and put its destination in href. The destination can be another page, a file, a location within a document, or an email address. Write link text that tells readers where they will go.

Create a basic link with a and href

Wrap the visible link text in a and put the target URL in href. This example leads to Coding Factory's English-language tutorial on HTML lists. The linked list types and nesting rules are explained in Lists: ul, ol, dl, and Nested Lists.

<a href="https://www.codingfactory.net/en/15489">HTML lists tutorial</a>

“HTML lists tutorial” is the visible text; the URL is the destination. An a without href is not a normal navigation link. Using href="#" as a placeholder can cause unexpected navigation to the top of the page.

Understand absolute and relative URLs

An absolute URL beginning with https:// includes the destination's domain. A relative URL can point to a file from the current document's location or from the site's root. Practice maintaining the same menu across three documents in Build a Small Multipage Website.

The following about.html and ../contact.html paths are practice examples, not pages that currently exist on Coding Factory. Assume you are writing the links in lessons/index.html in this folder structure:

site/
  contact.html
  lessons/
    index.html
    about.html

<a href="https://www.codingfactory.net/en/15489">Full URL</a>
<a href="about.html">About page in this folder</a>
<a href="../contact.html">Contact page one folder up</a>
<a href="/en/15489">HTML lists on this site</a>

about.html is resolved relative to the current document. A path beginning with / is resolved from the website's root. Local file:// files have a different root from a deployed website, so test relative paths again after deployment.

Link to a location within a document

Give the destination element a unique id, then use # followed by that value in the link.

<a href="#contact">Go to contact details</a>



<h2 id="contact">Contact</h2>

<p>Contact information goes here.</p>

To reach a location in another file, append the fragment to its URL: about.html#contact. Avoid repeating the same id within one page.

Email links and new tabs

A mailto: URL asks the user's email application to start a message. It may not work as expected if no mail app is configured.

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

To open an external site in a new tab, use target="_blank" and the site's rel="noopener noreferrer" policy.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"

   target="_blank" rel="noopener noreferrer">MDN's a element reference</a>

Choose a new tab when it suits the reader's task, and make the behavior clear in the link text or nearby explanation.

What the download attribute can do

The download attribute asks the browser to download a linked file. For example, it can be used for this image hosted on the same site.

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>Download the example image</a>

download works with same-origin URLs and with blob: and data: URLs. It cannot force a regular URL on another site to download. Even for a same-origin file, browser settings and the server response can affect what happens.

MDN anchor and download behavior

Test relative paths with three real files

Save these three documents in the earlier site/ folder structure. This exercise checks navigation between files rather than sending a real contact message.

site/lessons/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Path practice home</title>
</head>
<body>
  <h1>Path practice home</h1>
  <nav aria-label="Practice menu">
    <a href="about.html">About</a>
    <a href="../contact.html">Contact</a>
  </nav>
</body>
</html>

site/lessons/about.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About</title>
</head>
<body>
  <h1>About</h1>
  <nav aria-label="Practice menu">
    <a href="index.html">Practice home</a>
    <a href="../contact.html">Contact</a>
  </nav>
</body>
</html>

site/contact.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact</title>
</head>
<body>
  <h1>Contact</h1>
  <nav aria-label="Practice menu">
    <a href="lessons/index.html">Practice home</a>
    <a href="lessons/about.html">About</a>
  </nav>
</body>
</html>

Open each file, follow its links, and compare the folders in the address bar. ../ goes up one directory. If a link fails, resolve it from the starting file's folder instead of guessing a different filename. Restore the values in the table after experimenting.

Check links before publishing

• Use text such as “HTML lists tutorial” rather than “click here.”
• Test relative paths from the document's actual deployed location.
• Check that a #id fragment exactly matches its destination.
• Remember that email and download links depend on the browser and user environment.

See MDN's a element reference for more URL and attribute details.