URL Anatomy — Reading the Address Bar

The single line in the browser's address bar has a more precise structure than it looks. It's a small grammar that expresses how to access which resource. This article covers each part of a URL, encoding rules, the difference between URL, URI, and URN, absolute vs relative paths, and data URLs and blob URLs.

1. About URL

URL stands for Uniform Resource Locator. Tim Berners-Lee's RFC 1738 in 1994 was the first definition, and in 1998 RFC 2396 placed it under the larger umbrella of URI. The current SSOT is RFC 3986 (URI Generic Syntax) from 2005. The browser-side spec is WHATWG's URL Standard.

URI stands for Uniform Resource Identifier — the umbrella for any string identifying a resource. URLs (location-based identification) and URNs (Uniform Resource Name, name-based identification, e.g., urn:isbn:0451450523) sit beneath it. In daily speech URL and URI are used almost interchangeably.

2. Full Structure

 scheme  userinfo    host    port      path       query       fragment
   │        │          │       │         │           │             │
   ▼        ▼          ▼       ▼         ▼           ▼             ▼
https://user:pass@example.com:8443/path/to/page?q=hello&p=2#section-3

What each part means:

Part	Example	Description
scheme	https · http · ftp · mailto · file · data · blob · ws · tel	Protocol to use
userinfo	user:pass	Auth info. Plain text, rarely used; some browsers block it
host	example.com · 192.168.1.1 · [::1]	Server address (domain or IP)
port	8443	Server port. Falls back to scheme default if omitted (http=80, https=443)
path	/path/to/page	Path to the resource
query	q=hello&p=2	After ?. Key=value form is conventional
fragment	section-3	After #. Not sent to the server; used for in-browser anchors and SPA routing

3. Branches of scheme

• http · https — the web's home turf. https is TLS-encrypted.
• ftp · sftp — file transfer. Modern browsers have been removing ftp support one by one.
• mailto — mailto:hi@example.com?subject=hello invokes the mail client.
• tel · sms — invokes the phone / SMS app on mobile.
• file — local file. file:///C:/Users/... or file:///Users/....
• data — inline data. data:image/png;base64,iVBORw0KGgo....
• blob — internal browser object URL. The result of URL.createObjectURL(blob).
• ws · wss — WebSocket.
• javascript — discouraged due to security risk.

4. Percent Encoding

URLs cannot contain characters outside the safe set. Korean letters, spaces, and special characters are encoded as % plus two hex digits:

공백  → %20
한글 '가' → %EA%B0%80   (UTF-8 0xEA 0xB0 0x80)
?, =, & 같은 구분자가 값으로 들어갈 때도 인코딩

Functions to use in JS:

encodeURIComponent("값 = 1 & 또=2"); // "%EA%B0%92%20%3D%201%20%26%20%EB%98%90%3D2"
encodeURI("https://example.com/한글");  // 스킴·구분자는 보존

encodeURIComponent is stricter. When building a single query value token, this one is safer.

5. Query String

The form ?key=value&other=2. To send multiple values for one key, ?tag=a&tag=b, ?tag[]=a&tag[]=b, and ?tag=a,b are all in use; no standard has settled. Server frameworks differ in how they parse it. When building it ourselves, use URLSearchParams:

const sp = new URLSearchParams();
sp.set("q", "hello");
sp.append("tag", "a");
sp.append("tag", "b");
sp.toString(); // "q=hello&tag=a&tag=b"

6. fragment

Anything after # is not sent to the server. That's why early SPA routing used the fragment (/#/about). Modern SPAs use the History API (pushState) to handle real paths.

7. Absolute vs Relative URLs

• Absolute — https://example.com/about
• Protocol-relative — //example.com/about (follows the current page's scheme)
• Root-relative — /about (from the current origin's root)
• Relative — about or ../about (from the current path)

The base for relative URLs is the document's base URL, which can be changed with <base href="...">.

8. data URL · blob URL

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'.../>" />

Inlines small images or SVGs without an external request. File size grows and caching doesn't apply.

const blob = new Blob([buffer], { type: "image/png" });
const url = URL.createObjectURL(blob);
// 사용 후
URL.revokeObjectURL(url);

A blob: URL points to an object in the browser's memory. It is meaningful only within the same page.

9. Identification Beyond URL

• URN — urn:isbn:9780132350884. Name, not location.
• DID (Decentralized Identifier) — did:web:example.com. Distributed ID.
• CID (IPFS Content Identifier) — content-hash-based addressing.
• OID (Object Identifier) — 1.2.840.113549.1.1.11. Identifier seen often in standards.

10. Common Shape

JS's URL class standardizes parsing and assembly:

const u = new URL("https://example.com:8443/api/users?id=42#top");
u.protocol;  // "https:"
u.hostname;  // "example.com"
u.port;      // "8443"
u.pathname;  // "/api/users"
u.searchParams.get("id"); // "42"
u.hash;      // "#top"

// 조립
const built = new URL("/users", "https://example.com");
built.searchParams.set("page", "2");
built.toString(); // "https://example.com/users?page=2"

Checking encoding from the command line:

# Python (Windows · macOS 공통)
python -c "from urllib.parse import quote; print(quote('가나다'))"

# Node
node -e "console.log(encodeURIComponent('가나다'))"

11. Common Pitfalls

Korean domains are punycoded via IDN (RFC 3490) — 한국.kr is actually xn--3e0b707e.kr. Confusing in certificate / email validation.

The places where + in a query value is interpreted as a space (application/x-www-form-urlencoded) versus as a literal +. URLSearchParams interprets + as a space.

https://example.com vs https://example.com/ — depending on the server, the same or different resources. The difference between empty path and a single slash.

Case — scheme and host are case-insensitive; path and query preserve case (server policy varies).

Fragments are not sent to the server, but they may remain in browser history and Referer.

Closing thoughts

A URL line is a six-part agreement: scheme, host, port, path, query, fragment. Using the URL class plus URLSearchParams standard tools frees us from the encoding, multi-value query, and relative-path traps. As long as we stay aware of the small spots — Korean domains, + interpretation, slash differences — daily use rarely produces friction.

Next

• internet-how-it-works
• browser-devtools

RFC 3986 URI Generic Syntax · WHATWG URL Standard · RFC 3490 IDN · MDN URL · MDN URLSearchParams · URL Decoder/Encoder · Punycode converter for reference.