Links & file paths

Understand the idea

An anchor with an href connects a document to another location. That location can be a page, a file, an email address, or a section of the current page.

A path beginning with a single / starts at the origin's root. Other relative paths are resolved against the document's base URL, normally the current page URL. A base element can change that base, so these examples assume none is present. A fragment such as #contact points to an element with a matching id. Use meaningful link text so a reader can predict the destination.

Read the example

This is an HTML fragment. Place it inside the body of a complete HTML document, unless the example explicitly identifies head content.

<a href="/html/">HTML articles</a>
<a href="#contact">Contact details</a>

<section id="contact">
  <h2>Contact</h2>
  <a href="mailto:42@html-code.fyi">Email Mario</a>
</section>

A small mistake, explained

How to fix it. Inspect the resolved URL in the browser. Check spelling, case and the directory structure. Test root-relative paths through a local web server rather than by opening a file directly.

Try it yourself

Make a link to a section, then deliberately change its id. Restore the exact match and test again.

Further reading

HTML Living Standard — links

MDN — the document base URL

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.

Keep exploring

• HTML · Guide
  Your first HTML document

  Give the browser a clear document, from the doctype to the closing tag.

• HTML · Guide
  Headings & paragraphs

  Build a readable outline instead of choosing tags by their default size.