October 24, 2026

Navigating HTML Links: Target Attributes, Paths, and Link States


As I continue learning on freeCodeCamp, today's lessons focused on the core mechanics of HTML links (<a> tags).

Understanding how browsers handle browsing contexts, file paths, and interactive states is essential for building web applications.

1. Understanding target Attributes




By default, clicking a link replaces the current web page. But with the target attribute, you can control where the newly linked page opens.

Here are the key target values:

  • _self (Default): Opens the link in the current tab or window.

  • _blank: Opens the link in a brand-new browsing context (usually a new tab).

  • _parent: Opens the link in the parent frame. If you are inside an embedded <iframe>, this opens the link in the window containing that frame.

  • _top: Opens the link in the full, top-most browser window, breaking out of nested frames entirely.

  • _unfencedTop: An experimental value used for the FencedFrame API (mostly safe to ignore for now).

2. Paths and URLs


When linking to files or external pages, you need to specify their locations using paths or URLs.




  • Absolute Paths: Specify the complete location starting from the root directory of a file system (e.g., /Users/user/Desktop/project/index.html).

  • Absolute URLs: Include the full address needed to access an online resource, complete with protocol and domain (e.g., [https://freecodecamp.org](https://freecodecamp.org)).

  • Relative Paths: Specify a location relative to where the current file lives (e.g., about.html). These keep code clean, portable, and maintainable.

Decoding Path Syntax


  • / (Slash): Acts as a path separator between directories.

  • . (Single Dot): Represents the current directory (./script.js).

  • .. (Double Dot): Moves up to the parent directory (../styles.css).

My Personal Takeaway:

As a long-time Linux user, I use absolute and relative paths in the command terminal every single day. Seeing these exact same concepts applied directly to HTML file structures made this lesson feel second nature. Another proof that learning by doing is one of the most effective ways to master technology!

3. The 5 States of an HTML Link


In CSS, links aren't static, they change visually depending on how a user interacts with them. These interactive stages are represented by pseudo-classes:




  1. :link – The default state for an unvisited link.

  2. :visited – Applies once a user has already clicked and visited the URL.

  3. :hover – Triggers when a mouse cursor hovers over the link.

  4. :focus – Triggers when the link is selected via keyboard navigation (like hitting the Tab key).

  5. :active – Applies during the exact moment the link is being clicked.

The Correct Order Matters!


When styling link states in CSS, order is critical so styles don't override each other unexpectedly. A common rule of thumb to remember the sequence is LVHA (or LoVe HAte with Focus inserted before hover/active depending on design needs):a:link ➔ a:visited ➔ a:hover ➔ a:focus ➔ a:active




Understanding how to control navigation, structure file paths efficiently, and style links for better UX form the backbone of front-end development.
attribute Browser HTML Links Paths target URL Read more