Links & Navigation

Without links, every web page would be an isolated island. Links are how users move from one page to another — and they're created with the humble <a> tag.

Basic Link Syntax

A link has two parts: the href attribute (where the link goes) and the link text (what the user sees and clicks).

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

The result is a clickable link that takes the user to https://example.com.

Absolute vs. Relative URLs

There are two types of URLs you'll use in links:

Absolute URLs include the full web address, including the protocol (https://). Use these to link to external sites:

<a href="https://developer.mozilla.org">MDN Web Docs</a>

Relative URLs point to other pages within your own site. They're relative to the current file's location:

<a href="/about.html">About Us</a>
<a href="contact.html">Contact</a>

Opening Links in a New Tab

Add target="_blank" to open a link in a new browser tab. It's good practice to also add rel="noopener noreferrer" for security:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open in New Tab
</a>

Linking to Page Sections

You can link to a specific section of a page using an ID. First, give the target element an id:

<h2 id="about">About Me</h2>

Then link to it with a # prefix:

<a href="#about">Jump to About Section</a>

This is called an anchor link. It's useful for long pages where you want to let users jump to different sections.

Email and Phone Links

You can also create links that open an email client or initiate a phone call:

<a href="mailto:hello@example.com">Email Us</a>
<a href="tel:+1234567890">Call Us</a>

Navigation Example

Here's a simple navigation bar using links:

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
  <a href="/blog.html">Blog</a>
  <a href="/contact.html">Contact</a>
</nav>