Links and Paths

Links are what make the web a web: every page can point at any other page in the world, and one click follows it. A link takes a single element to write, and its only hard part is the address you give it. That address is where nearly every broken link comes from.

Addresses work like directions. A full postal address, with street, town and country, finds a house from anywhere in the world. "Two doors down from here" is shorter and equally useful, but only if you know where "here" is. Links use both kinds, and knowing which one you are writing is most of this page.

What Is a Link Made Of?

A link is an a element. Its href attribute holds the address to go to, and its content is the link text, the words a visitor sees and clicks. The browser shows link text in blue and underlined. Once you have visited the address, it turns purple, so a visitor can tell where they have already been.

<p>
  For every element in this chapter, see
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN's guide to HTML</a>.
</p>

The browser shows one sentence ending in the words "MDN's guide to HTML", underlined in blue. In most browsers, hovering over them shows the full address in a small bar at the bottom of the window. Clicking replaces the current page with MDN's. The Back button returns you here.

A link can also open its page in a new tab, by adding the attribute target with the value _blank. Use it rarely. A new tab breaks the Back button, because the new tab has no history to go back to, and it can disorient someone who cannot see that a tab has opened. It earns its place in a few cases, such as a help page opened from the middle of a half-filled form, where leaving the form would lose what the visitor typed.

Absolute Addresses

The address in the MDN link is an absolute URL: it starts with https:// and names the site and the page in full. Like a postal address, it works from anywhere. Use one whenever you link to a page on another site. You never have to type one by hand: open the page, copy the address from the address bar, and paste it between the quotes.

Relative Paths: Directions from Where You Stand

Links between the pages of your own site use a relative path instead: an address worked out from the folder the current page sits in. The browser takes the location of the page it is showing and follows the path from there. There are three moves to know.

<!-- In index.html: a file in the same folder -->
<a href="projects.html">My projects</a>

<!-- In index.html: a file inside a subfolder -->
<link rel="stylesheet" href="css/style.css">

<!-- In notes/first-note.html: a file one folder up -->
<a href="../index.html">Home</a>

The three note lines are comments: text between the comment markers, written for people, which the browser skips and never shows. The first link uses a file name alone, which means "a file in the same folder as this page". The second line, which you will add in Chapter 3, points at a file inside a folder: the folder's name, a forward slash, then the file. The third imagines a page inside a folder called notes. Two dots and a slash mean "go up one folder", so from inside notes it climbs back to the site's main folder and finds the Home page there.

The real value of relative paths shows when you publish. The whole site folder moves to a server, and every relative link still works, because the pages stand in the same places relative to each other. Chapter 13 does exactly that.

Two habits keep paths from breaking after you publish. First, match capital letters exactly: your computer usually treats Projects.html and projects.html as the same file, but most web servers do not, so a link that works at home fails online. Second, never link to a location on your own disk, such as a path starting with C colon on Windows or with your user folder on a Mac. It works on your machine and on no one else's.

Folder

my-site/

The page you are on

index.html

Same folder

projects.html

href="projects.html"

Same folder

contact.html

href="contact.html"

Subfolder

css/

Inside css

style.css

href="css/style.css"

Links Inside a Page

A link can also jump to a spot on the same page, which helps on long pages. First give the target element an id attribute: a name that must be unique on the page and contain no spaces. Then write a link whose address is a hash sign followed by that name.

<a href="#opening-hours">See the opening hours</a>

<!-- further down the same page -->
<h2 id="opening-hours">Opening hours</h2>

Clicking "See the opening hours" scrolls the page until that heading sits at the top of the window, and the address bar gains the hash and the name at its end. That address can be shared: open it in a new tab and the browser scrolls straight to the heading.

Link Text That Stands on Its Own

Screen readers can list every link on a page by its text alone, and many of their users move around a page that way. A list that reads "click here, click here, read more" tells them nothing. Link text should say where the link goes, even out of context: "MDN's guide to HTML", "My projects", "Download the menu as a PDF". It is also easier for everyone to spot while scanning.

Now your site gets its other two pages. Create projects.html and contact.html next to index.html. Each page starts with a list of links to all three pages, so a visitor can get anywhere from anywhere. Here is the list at the top of the body in index.html.

<body>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <h1>Your Name</h1>
  <p>I build small, useful things for the web.</p>
</body>

The list sits above your heading and tagline. The browser shows three bulleted, underlined links, Home, Projects and Contact, then your name and tagline as before. It is not pretty yet; Chapters 3 and 4 turn it into a proper menu. The new pages use the same skeleton, the same list, and a heading of their own.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Projects - Your Name</title>
  </head>
  <body>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <h1>Projects</h1>
    <p>Things I have built.</p>
  </body>
</html>

Make contact.html the same way, with the title "Contact - Your Name", the heading "Contact" and the paragraph "How to reach me." Now open the Home page in the preview and click through: Projects, Contact, Home. Each click loads a different file, the tab title changes, and the links you have visited turn purple. Rename one file to a wrong capital letter and click its link: on your own computer it may still work, which is exactly the trap described above. Rename it back before you go on.