Understanding Links in HTML

← Back to Index

Relative Links

Relative links specify folder, file, and other resources by naming the filesystem path they reside at starting from the current file's location.

A single period (.) references the current directory.

File in the same directory:
./file.ext or simply file.ext

Folder in the same directory:
./folder or simply folder

File in a child directory:
./folder/file.ext

Two periods (..) represents going up one directory level.

File in the parent directory:
../file.ext

Folder in the parent directory:
../folder

File in a sibling directory:
../folder2/file.ext

Absolute Links

Absolute links are either a complete (absolute) file path including the root directory or a URL with the protocol and domain name:

Complete File/Folder Path (Absolute):
- Syntax:
  - drive:\path\to\file.ext
  - drive:\path\to\other\file.ext
  - drive:\path\to\folder
- Examples:
  - C:\windows\notepad.exe
  - C:\windows\system32\cmd.exe
  - C:\windows

Complete URL (Protocol and Domain):
- Syntax:
  - protocol://domain/
  - protocol://domain/path
- Examples:
  - https://www.github.com
  - https://www.github.com/features

Quick Reference

Directory Navigation:
• .  = Current directory
• .. = Parent directory

Relative Paths:
• Same directory:    ./
• Child directory:   ./background
• Parent directory:  ../file.ext
• Sibling directory: ../folder/file.ext

Absolute Path:
• https://www.example.com/about.html