HTML - Basic HTML Part 8

May 7, 2026 3:00pm UTC (Check your timezone)

Theory Review Quiz

Instructors: Jess, Carmen, and Eda

Basic HTML

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

We’ve been adding target="_blank" to anchor elements for a while without really explaining what it means. Today we fix that.

Target attribute: an attribute on the anchor element that tells the browser where to open the URL when someone clicks the link.

There are four important values you’ll actually use, and each one starts with an underscore:

1. _self is the default value. This opens the link in the current browsing context, which in most cases means the current tab or window. If you don’t set a target at all, this is what happens.

1<a href="https://example.com" target="_self">Open in same tab</a>

2. _blank opens the link in a new browsing context, which typically means a new tab. (Some users have their browsers configured to open a new window instead, which is fine. The point is that the user does not lose their current page.)

1<a href="https://example.com" target="_blank">Open in new tab</a>

3. _parent opens the link in the parent of the current context. This only matters if your page contains an iframe (an embedded page within a page). A _parent link inside an iframe will break out of the iframe and open in the main page that contains it.

4. _top opens the link in the top-most browsing context. Think “the parent of the parent of the parent”. It’s similar to _parent, but it always goes all the way to the top, even with deeply nested embedded frames.

There is also a fifth value called _unfencedTop used for the experimental FencedFrame API. You almost certainly will not need this. It’s mentioned for completeness, not because you’ll use it.

Why does this matter? Choosing the right target value is part of being thoughtful about user experience. If a user clicks an external link, opening it in a new tab keeps them anchored to your site. If they click an internal navigation link, opening it in the same tab is usually what they expect.

Questions:

When you’re linking to something (a stylesheet, an image, another page, a script), you need to tell the browser where to find it. There are a few different ways to do that, and they each have a name.

Path: a string that specifies the location of a file or directory in a file system.

There are three types you should know.

1. Absolute path

A complete link to a resource. It starts from the root directory and includes every folder along the way, plus the filename and extension. Here’s an example linking to an about.html file on your local machine:

1<a href="/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html">
2  About Page
3</a>

The “root directory” is the top-level directory in your file system hierarchy. On a Mac that’s /, on Windows it’s C:\ (or another drive letter).

2. Absolute URL

A complete address used to access a resource on the web. It includes:

1<a href="https://design-style-guide.freecodecamp.org/img/fcc_secondary_small.svg">
2  View fCC Logo
3</a>

In this example, the protocol is https, the domain is design-style-guide.freecodecamp.org, and the filename is fcc_secondary_small.svg.

A handy detail: when you open a local file in your browser, the address bar shows it as a URL with the file:// protocol. So file:///Users/user/Desktop/... is what an absolute path on your local machine looks like as a URL.

3. Relative path

A path that specifies the location of a file relative to the directory of the current file. It does not include the protocol or the domain name. This makes it shorter and more flexible for internal links within the same site.

1<a href="about.html">About Page</a>

If the current page is contact.html and about.html is sitting right next to it in the same folder, that’s all you need.

Which one should you use, and when?

Questions:

You may have seen file paths written like /public/logo.png, ./script.js, or ../styles.css and wondered what those slashes and dots actually mean. Let’s break it down.

There are three pieces of syntax to know:

1. The slash (/)

Known as the path separator. It’s used to indicate a break in the text between folder or file names. So naomis/files means “go into the folder named naomis, then into the folder named files”.

(On Windows, the path separator is technically a backslash \, but you’ll almost always use forward slashes / in web development because that’s what URLs use.)

A leading slash, like /public/logo.png, means “start from the root of the site/file system”.

2. The single dot (.)

Refers to the current directory. You’ll typically see a single dot used to make it clear that the path is a relative one. So ./script.js means “the file called script.js in the same folder as the current file”.

3. The double dot (..)

Refers to the parent directory (one level up from the current folder). This is the one you’ll use most often in real projects, because you frequently need to reach files that aren’t in the same folder you’re working in.

A worked example:

Given this file tree:

my-app/
├── public/
│   ├── favicon.ico
│   └── index.html
└── src/
    ├── index.css
    └── index.js

If you’re inside public/index.html and you want to load favicon.ico (which is in the same folder), you’d use:

./favicon.ico

If from that same public/index.html file you want to load index.css (which is in the src folder, a sibling to public), you’d use:

../src/index.css

Read that as: “go up one level (..) into my-app, then into src, then grab index.css”.

Quick reference:

Questions:

Have you ever clicked a link on a page and noticed it turned purple? That’s not random. The browser is showing you that the link is in a different state than it was before, and we can use CSS to control how each state looks.

There are five link states. The styling preview here is just for context (we’ll learn CSS properly later).

1. :link

The default state. Applies to a link that the user has not visited, clicked, or interacted with yet. This is the base style for all your links. Default browser color is usually blue.

2. :visited

Applies when the user has already visited the page being linked to. By default, the browser turns these purple. This is genuinely useful for users (it helps them remember which articles they’ve already read), so don’t strip it out without a reason.

3. :hover

Applies while the user is hovering their cursor over the link. This state is helpful for giving extra visual feedback so users know the thing they’re pointing at is clickable.

4. :focus

Applies when the link receives keyboard focus, like when a user tabs through the page. This is critical for accessibility. Users who navigate by keyboard need to be able to see where they are.

5. :active

Applies during the brief moment a link is being activated (clicked or tapped). Useful as a confirmation that the click registered.

The order matters.

When you write CSS for these states, the order you write them in is important, because of how CSS specificity and source order interact. The convention is:

:link  →  :visited  →  :hover  →  :focus  →  :active

Questions: