HTML URL Paths

HTML URL Paths: Understanding Web Address Anatomy

A URL (Uniform Resource Locator) is the complete address browsers use to locate an HTML page, image, stylesheet, or API endpoint on the internet. Understanding every segment of a URL helps you write reliable href links, configure canonical SEO tags, and debug routing errors quickly.

Anatomy of a Complete URL

Consider https://api.example.com:8443/tutorials/html/lesson?tab=code#faq:

1. Scheme (https://): Defines the transfer protocol—https for encrypted web traffic, http for unencrypted local servers, or mailto: / tel:.
2. Host (api.example.com): The domain name (and optional subdomain) pointing to the server IP address.
3. Port (:8443): Optional network port; standard ports :80 (HTTP) and :443 (HTTPS) are hidden automatically.
4. Path (/tutorials/html/lesson): Locates the specific file or route on the server.
5. Query String (?tab=code): Passes key-value filters or search terms after ?, separated by &.
6. Fragment (#faq): Scrolls straight to an element with id="faq" inside the browser without leaving the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML URL Paths Demo</title>
    <link rel="canonical" href="https://example.com/tutorials/html/lesson/html-url-paths">
</head>
<body style="font-family: system-ui, sans-serif; padding: 20px;">
    <nav>
        <!-- Root-relative internal path -->
        <a href="/tutorials/html">HTML Hub</a> |
        <!-- Path with query parameter -->
        <a href="/search?topic=html&level=beginner">Beginner HTML</a> |
        <!-- Fragment jump link -->
        <a href="#url-notes">Read Notes</a>
    </nav>

    <section id="url-notes" style="margin-top: 24px;">
        <h3>Fragment Routing</h3>
        <p>The #url-notes hash never gets sent to the backend server; browsers resolve it locally.</p>
    </section>
</body>
</html>

Common Mistakes to Avoid

• Linking external sites with http:// when https:// is available: HTTPS protects visitor privacy and avoids mixed-content browser warnings.
• Inconsistent trailing slashes: Decide whether routes end with / or without / and keep internal links and canonical URLs consistent to prevent duplicate SEO URLs.
• Putting sensitive tokens inside URL query parameters: Query strings show up in server logs, browser history, and Referer headers.

Frequently Asked Questions

Is the #fragment part of a URL sent to the web server?

No. Browsers strip everything from # onward before sending the HTTP request and handle fragment scrolling on the client side.

Why use protocol-relative URLs like //cdn.example.com?

Protocol-relative URLs are outdated now; always use explicit https:// URLs for external resources.