URLs, URIs, and URNs
Master the universal addressing system of the web: dissect RFC 3986 URI grammar, understand path resolution algorithms, and master absolute versus relative hyperlinking.
🎯 Learning Objectives
- Differentiate clearly between URIs, URLs, and URNs according to RFC 3986.
- Dissect all 8 anatomical components of a complete URL.
- Master path resolution: Absolute URLs, Root-Relative URLs, and Directory-Relative URLs (
./,../). - Understand URL Percent-Encoding rules for special characters.
- Explain why fragment identifiers (
#hash) are processed exclusively on the client side.
📖 Mental Model: The Global Book Identification System
Imagine managing every published book on Earth:
- URI (Uniform Resource Identifier): The overarching category for any string that identifies a resource.
- URN (Uniform Resource Name): The book’s permanent ISBN barcode (urn:isbn:978-0132350884). It names what the book is. If a library burns down or moves to a new city, its ISBN never changes.
- URL (Uniform Resource Locator): The book’s physical library shelf coordinate (https://nypl.org/shelf-4/row-b/book-12). It tells you how to get there and where it is located right now.
1. The URI Anatomy (RFC 3986)
Standardized by the Internet Engineering Task Force in RFC 3986, a complete URI adheres to the following grammar:
| Component | Example | Technical Description & Rules |
|---|---|---|
| Scheme (Protocol) | https://, mailto:, tel: |
Defines the communication protocol and cryptographic requirements. Case-insensitive; followed by a colon. |
| Authority (Host) | developer.mozilla.org |
The registered domain name or IP address resolved by DNS. |
| Port | :443 (HTTPS), :80 (HTTP) |
The target network socket endpoint. Omitted when using standard default ports. |
| Path | /en-US/docs/Web/HTML |
Hierarchical file path or route pattern on the origin server. |
| Query String | ?view=full&theme=dark |
Key-value parameters separated by & for server search or frontend routing. |
| Fragment (Hash) | #syntax |
Client-side anchor identifier pointing to an element with id="syntax". Never sent to the server in HTTP headers. |
2. Absolute vs. Relative Path Resolution
When authoring HTML links (<a href="...">) or embedding assets (<img src="...">), you must choose the appropriate path resolution strategy:
| Link Syntax Type | Example Value | How the Browser Resolves the Target |
|---|---|---|
| Absolute URL | https://cdn.example.com/logo.svg |
Resolves to the specified external domain regardless of where the current document is hosted. |
| Root-Relative URL | /assets/images/logo.svg |
Resolves relative to the domain root origin (e.g. https://example.com/assets/images/logo.svg). |
| Same-Directory Relative | ./style.css or style.css |
Resolves in the same folder as the current HTML document. |
| Parent-Directory Relative | ../chapter-02/index.html |
Steps up one folder level, then traverses down into chapter-02/. |
| Fragment-Only Link | #pricing-table |
Scrolls viewport instantly to the element with id="pricing-table" without triggering a page reload. |
3. URL Percent-Encoding
URLs may only contain a limited set of standard ASCII characters. All other characters (spaces, emojis, unicode, symbols) must be percent-encoded:
- Space (
%20(or+in query strings) - Question Mark (
?) →%3F - Ampersand (
&) →%26 - Hash (
#) →%23
3. Interactive Live Demo: In-Page Fragment Navigation & Links
Test in-page fragment jumping and external link resolution in the live editor below:
🏋️ Hands-On Exercise: Author a Complete Navigation Hierarchy
Your Mission: Build a multi-type navigation component featuring:
- An Absolute External Link: Navigates to
https://w3c.orgwithtarget="_blank"andrel="noopener noreferrer". - A Root-Relative Link: Navigates to
/api/v1/documentation. - A Directory-Relative Link: Navigates up two folders to
../../index.html. - A Special Protocol Link: A clickable
mailto:[email protected]link. - An In-Page Fragment Link: Navigates to
#faq-section, with a corresponding<section id="faq-section">below it.
⚠️ Common Pitfall: Missing rel="noopener noreferrer" on target="_blank"
When opening external links in a new tab via target="_blank", malicious target pages could historically access window.opener.location to redirect your user to a phishing website (the tabnabbing vulnerability). Modern browsers now implicitly apply rel="noopener", but writing rel="noopener noreferrer" remains mandatory defense-in-depth best practice.
💡 Pro Tip: Trailing Slashes on Directory URLs
Always include the trailing slash when linking to directories (e.g. href="/blog/" instead of href="/blog"). Without the trailing slash, the web server must send a 301 Moved Permanently redirect to append the slash, wasting an entire network round trip time!
📌 Key Takeaways
- URI is the umbrella category; URL specifies the physical location/protocol; URN specifies the persistent name.
- URL Anatomy:
scheme://host:port/path?query#fragment. - Absolute URLs specify domain and scheme; Root-relative URLs start with
/; Path-relative URLs use./or../. - Fragment identifiers (
#id) target matching DOM element IDs and are never sent to web servers in HTTP requests. - Special URL schemes include
mailto:(email client),tel:(phone dialer), andsms:.