Links: Internal, External & Anchor Navigation

The Anchor Element

Links are the foundation of the web. Without them, every page would be an isolated document with no way to connect to other content. The <a> (anchor) element creates hyperlinks, and its most important attribute is href (hypertext reference), which specifies the destination URL. Any content placed between the opening and closing anchor tags becomes clickable -- text, images, or even entire sections.

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

<!-- Link wrapping an image -->
<a href="https://www.example.com">
  <img src="logo.png" alt="Example Logo">
</a>

By default, links are displayed as underlined blue text. Once a link has been visited, it turns purple. These are the default browser styles for link states, which can be customized with CSS.

Absolute vs Relative URLs

Understanding the difference between absolute and relative URLs is essential for building websites correctly. An absolute URL contains the full address including the protocol and domain name, such as https://www.example.com/about.html. It works from anywhere because it specifies the complete path. A relative URL points to a file relative to the current page location. If your current page is at /pages/contact.html and you link to ../index.html, the browser navigates up one directory to find the file.

<!-- Absolute URL: full path including domain -->
<a href="https://www.example.com/blog/post.html">Read Post</a>

<!-- Relative URL: same directory -->
<a href="contact.html">Contact Us</a>

<!-- Relative URL: subdirectory -->
<a href="blog/latest.html">Latest Post</a>

<!-- Relative URL: parent directory -->
<a href="../index.html">Back to Home</a>

<!-- Root-relative URL: starts from site root -->
<a href="/about.html">About</a>

Opening Links in New Tabs

The target attribute controls where the linked page opens. Setting target="_blank" opens the link in a new browser tab. However, this introduces a security concern: the new page gains access to your page through the window.opener object, which could be exploited for phishing attacks. To prevent this, always pair target="_blank" with rel="noopener noreferrer".

<!-- Opens in new tab with security attributes -->
<a href="https://www.example.com"
   target="_blank"
   rel="noopener noreferrer">
  Visit Example (opens in new tab)
</a>

<!-- Default behavior: opens in same tab -->
<a href="https://www.example.com">
  Visit Example (same tab)
</a>

Email, Phone & Download Links

The href attribute is not limited to web addresses. The mailto: protocol creates a link that opens the user default email client with a pre-filled recipient address. The tel: protocol creates a clickable phone number, which is especially useful on mobile devices. The download attribute tells the browser to download the linked file instead of navigating to it.

<!-- Email link -->
<a href="mailto:hello@example.com">Send Email</a>

<!-- Email with subject and body -->
<a href="mailto:hello@example.com?subject=Hello&amp;body=I%20have%20a%20question">
  Email with Subject
</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call Us: (123) 456-7890</a>

<!-- Download link -->
<a href="/files/resume.pdf" download>Download Resume (PDF)</a>

<!-- Download with custom filename -->
<a href="/files/doc.pdf" download="my-resume.pdf">Download</a>

Anchor Links and Page Navigation

Anchor links allow users to jump to a specific section within the same page. This is accomplished by giving a target element a unique id attribute, then linking to that id using a hash symbol (#). When a user clicks the link, the browser scrolls to the element with the matching id. This technique is commonly used for tables of contents, FAQ pages, and long-form articles.

<!-- Navigation links at the top -->
<nav>
  <ul>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#features">Features</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<!-- Target sections further down the page -->
<section id="introduction">
  <h2>Introduction</h2>
  <p>Welcome to our website...</p>
</section>

<section id="features">
  <h2>Features</h2>
  <p>Here is what we offer...</p>
</section>

<section id="contact">
  <h2>Contact</h2>
  <p>Get in touch with us...</p>
</section>

<!-- Back to top link -->
<a href="#">Back to Top</a>

Link States

Links have four states that can be styled with CSS. The :link state applies to links that have not been visited. The :visited state applies to links the user has already clicked. The :hover state is active when the cursor is positioned over the link. The :active state applies at the moment the link is being clicked. These are styled using CSS pseudo-classes and should be defined in this specific order, often remembered by the mnemonic "LoVe HAte" (Link, Visited, Hover, Active).