---
id: html-file-paths
title: "HTML File Paths"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["file path", "relative path", "absolute path", "HTML src path", "linking files", "URL path"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "file-paths", "links"]
raw_sources: ["https://www.w3schools.com/html/html_filepaths.asp"]
applied_in: []
github_commit: ""
---

# [[HTML File Paths]]

## 🎯 한 줄 통찰 (One-line insight)
A file path describes the location of a file within a web site's folder structure, and is used whenever an HTML page links to external files such as pages, images, style sheets, or scripts. [S1]

## 🧠 핵심 개념 (Core concepts)
- **File path = location in the folder structure** — it tells the browser where to find a file in a web site's folder hierarchy. [S1]
- **Where paths are used** — file paths are used when linking to external files: web pages, images, style sheets, and JavaScripts. [S1]
- **Absolute file path** — provides the complete URL (including the protocol and domain) to a file. [S1]
- **Relative file path** — points to a file relative to the current page, without a fixed base URL. [S1]
- **Best practice** — it is best practice to use relative file paths (if possible), so pages keep working across localhost and different domains. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Same folder** — `src="picture.jpg"` references a file in the same folder as the current page. [S1]
- **Subfolder** — `src="images/picture.jpg"` references a file in an `images` folder inside the current folder. [S1]
- **Root-relative** — `src="/images/picture.jpg"` (leading slash) references a file in an `images` folder at the root of the web site. [S1]
- **Parent folder** — `src="../picture.jpg"` references a file one level up from the current folder. [S1]

## 📖 세부 내용 (Details)
**What is a file path?**
A file path describes the location of a file in a web site's folder structure. File paths are used when linking to external files, including web pages, images, style sheets, and JavaScripts. [S1]

**File path examples**

| Path | Description |
|---|---|
| `<img src="picture.jpg">` | File in the same folder as the current page |
| `<img src="images/picture.jpg">` | File in the `images` folder in the current folder |
| `<img src="/images/picture.jpg">` | File in the `images` folder at the root of the current web |
| `<img src="../picture.jpg">` | File one level up from the current folder |

[S1]

**Absolute file paths**
An absolute file path is the full URL to a file: [S1]
```html
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
```

**Relative file paths**
A relative file path points to a file relative to the current page. [S1]

Root-relative (starts at the web root): [S1]
```html
<img src="/images/picture.jpg" alt="Mountain">
```

Located in the `images` folder in the current folder: [S1]
```html
<img src="images/picture.jpg" alt="Mountain">
```

One level up from the current folder: [S1]
```html
<img src="../images/picture.jpg" alt="Mountain">
```

**Best practice**
It is best practice to use relative file paths (if possible). When relative file paths are used, web pages will not be bound to your current base URL, and all links will work on your own computer (localhost) as well as on your current public domain and your future public domains. [S1]

## 🛠️ 적용 사례 (Applied in summary)
The image-linking snippets above are the canonical applied examples for referencing files from same-folder, subfolder, root, and parent-folder locations. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Absolute path (full URL):
```html
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
```
Relative paths:
```html
<img src="picture.jpg" alt="Mountain">          <!-- same folder -->
<img src="images/picture.jpg" alt="Mountain">   <!-- subfolder -->
<img src="/images/picture.jpg" alt="Mountain">  <!-- web root -->
<img src="../images/picture.jpg" alt="Mountain"><!-- parent folder -->
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Absolute path** — binds the reference to a specific base URL/domain; suitable for linking to external resources on other sites. [S1]
- **Relative path** — not bound to any base URL; the same markup works on localhost and across current and future domains. The source recommends relative paths when possible. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Links]], [[HTML Images]], [[HTML Head]], [[HTML Style Guide]]
- **참조 맥락:** Referenced whenever an HTML document links to an external resource (image, stylesheet, script, or another page).

## 📚 출처 (Sources)
- [S1] W3Schools — HTML File Paths — https://www.w3schools.com/html/html_filepaths.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML File Paths" page (Astra wiki-curation, P-Reinforce v3.1 format).