OnlineCBT
1. Mastering HTML File Paths
Broken images and non-loading CSS stylesheets are overwhelmingly caused by file path confusion. An HTML file path describes where a file is located in a website folder structure.
2. Path Patterns Reference
| Syntax | Meaning | Example |
|---|---|---|
style.css |
Located in the exact same folder as the HTML file. | |
assets/css/style.css |
Located in a subfolder relative to current location. | |
../images/logo.png |
Jump up one folder level, then enter images. |
|
/assets/js/app.js |
Root-relative: Starts from website root directory. | |
3. Crucial Rules for Web File Paths
- Always use forward slashes (
/), never Windows backslashes (\). - Web file systems (Linux hosting servers) are case-sensitive:
logo.PNGis not the same aslogo.png. - Avoid spaces in file names; use hyphens (e.g.,
student-report-card.pdf).
