HTML Uniform Resource Locators (URLs)

HTML Uniform Resource Locators (URLs)

HTML uses URLs to link, load, and reference these resources.

 1. What Is a URL?

A URL tells the browser:

• Where a resource is located

• How to access it

Example:

 2. Parts of a URL (Anatomy)

 3. Absolute vs Relative URLs (Very Important)

Absolute URL

A complete web address.

• Works from anywhere
•  Less portable

Relative URL (Recommended for sites)

Based on the current file’s location.

•  Short & portable
• Best for local projects

 4. Root-Relative URLs

Start from the site root.

•  Great for large sites
• Requires correct server root

 5. URLs in Common HTML Elements

 Links

Images

 CSS

 JavaScript

 Iframes

 6. URL Protocols You’ll See

Examples:

7. Query Strings (Passing Data)

In the URL:

 Used for filters, searches, tracking

 8. URL Fragments (Anchors)

Jump to a specific section on a page.

 9. URL Encoding (Special Characters)

Spaces and special characters must be encoded.

Example:

 Common URL Mistakes

• Using Windows paths (C:\folder\file)
• Backslashes \ instead of / 
•  Wrong case (Logo.png ≠ logo.png)
• Missing protocol (https://) in absolute URLs
•  Broken relative paths

Quick Reference

 Key Takeaways

• URLs point to resources

• Prefer relative URLs for site files

• Understand absolute vs relative

• Use proper encoding

• URLs are everywhere in HTML