HTMLCSSJAVASCRIPTANGULARINTERVIEW QUESTIONSSQLPYTHONJAVAPHPHOW TOW3.CSSCC++C#BOOTSTRAPREACTMYSQLJQUERYEXCELXMLDJANGONUMPYPANDASNODEJSDSATYPESCRIPTANGULARJSGITPOSTGRESQLMONGODBASPAIRGOKOTLINSWIFTSASSVUEGEN AIAGENTIC AIPROMPT ENGINEERINGDOCKERKUBERNETESSPRINGSPRING BOOTUNIXSCIPYAWSCYBERSECURITYDATA SCIENCEINTRO TO PROGRAMMINGINTRO TO HTML & CSSBASHRUSTTOOLSHTMLCSSJAVASCRIPTANGULARINTERVIEW QUESTIONSSQLPYTHONJAVAPHPHOW TOW3.CSSCC++C#BOOTSTRAPREACTMYSQLJQUERYEXCELXMLDJANGONUMPYPANDASNODEJSDSATYPESCRIPTANGULARJSGITPOSTGRESQLMONGODBASPAIRGOKOTLINSWIFTSASSVUEGEN AIAGENTIC AIPROMPT ENGINEERINGDOCKERKUBERNETESSPRINGSPRING BOOTUNIXSCIPYAWSCYBERSECURITYDATA SCIENCEINTRO TO PROGRAMMINGINTRO TO HTML & CSSBASHRUSTTOOLS
    HTML Tutorial 0/139 lessons ~6 min read Lesson 28

    HTML File Paths

    html file paths file path strings in html attributes resolve against document base and origin. p file paths in html

    Course progress0%
    Focus
    18 guided sections
    Practice signal
    Examples included
    Career prep
    Interview Q&A included

    Introduction

    File paths in HTML attributes — absolute, relative, root-relative, and protocol-relative — determine whether assets load on staging, CDN, and localized domains. Shopify themes break when merchants use hardcoded absolute URLs; Airbnb image CDNs require correct path prefixes for responsive srcset. Staff engineers validate path resolution across environments in CI, not manually after deploy.

    Business problem

    Broken asset paths cause blank checkout logos, 404 hero images, and mixed-content warnings when HTTP assets load on HTTPS pages. Amazon seller central templates copied between regions shipped wrong CDN paths — conversion dropped until hotfix.

    • Revenue: Missing CSS from wrong relative path — unstyled checkout looks fraudulent.
    • SEO: Broken internal hrefs waste crawl budget on 404 chains.
    • Ops: Environment-specific absolute URLs in HTML require rebuild per deploy target.

    Why this feature exists

    Documents link to resources via URL strings in href and src. Relative paths let sites move between directories without rewriting every link; absolute URLs identify canonical resources across origins.

    • History: Early web used relative paths for portability; CDNs introduced absolute asset hosts.
    • Rejected: File system paths (C:\...) — never valid in web HTML.
    • Today: Base element and URL API resolve relative references at runtime.

    Browser internals

    URL parser resolves relative URLs against document base URL (document.baseURI from base href or location). ../ segments walk path; query and fragment preserved. Invalid URLs fail resource fetch silently or with network error in DevTools.

    • Base tag: Changes resolution for all relative URLs — one mistake breaks entire asset tree.
    • CORS: Cross-origin script/img paths trigger CORS rules for canvas taint, not simple img load.
    • Fetch priority: Resolved URL determines cache key and HTTP/2 push (deprecated) behavior.
    text
    Page: https://shop.example.com/en/products/shoe
    href="styles.css"     → .../products/styles.css
    href="/assets/app.js" → https://shop.example.com/assets/app.js
    href="../cart"        → https://shop.example.com/en/cart

    Rendering workflow

    Wrong path resolution blocks CSSOM construction — page renders unstyled (FOUC) or missing fonts shift layout when fallback loads. Google Fonts wrong path delays text paint on marketing pages.

    • LCP: Hero img 404 — no LCP candidate; fallback color block only.
    • CLS: Late-loading correct image after JS path fix causes shift.
    • Preload: link href must match final resolved script URL exactly or preload wasted.

    Feature deep dive

    Production conventions: Root-relative (/assets/...) for same-origin static files; absolute HTTPS for CDN; avoid protocol-relative (//) — explicit https. Use base only with extreme care in multi-tenant templates.

    • Relative: OK for sibling docs in static site — breaks if URL structure changes.
    • CDN: Absolute URL with fingerprint in filename — cache busting.
    • Data URLs: Inline small icons — increases HTML size, no extra request.
    html
    <head>
      <base href="https://cdn.shopify.com/s/files/1/0123/">
      <link rel="stylesheet" href="theme/main.css">
      <img src="/images/logo.svg" alt="Shop name" width="120" height="40">
      <script src="https://js.stripe.com/v3/" defer></script>
    </head>

    Accessibility analysis

    Broken image paths leave alt text without visual context — screen reader users hear description but colleagues see broken icon. BBC requires alt on all content images; path QA is a11y QA.

    • Decorative: Empty alt on broken decorative still announces "image" in some AT if src 404.
    • PDF links: href to wrong path — "link unavailable" after navigation attempt.
    • Icons: SVG sprite path wrong — missing icon with no text fallback fails WCAG.

    SEO impact

    Internal link hrefs with wrong relative paths create soft 404s and orphan pages. Google Search Console coverage report flags "Not found" crawl anomalies. Canonical link href must be absolute preferred URL.

    • Sitemap: Absolute loc URLs — relative invalid in XML sitemap.
    • hreflang: Alternate links need fully qualified URLs per locale.
    • Images: Broken image URLs in structured data Product image field — rich result errors.

    Security considerations

    Path traversal in user-supplied href — ../../../etc/passwd — blocked by browsers for file:// but open redirect if server resolves naively. javascript: and data: URLs in href/src are XSS vectors — validate schemes.

    • Open redirect: //evil.com in href looks same-site relative — use URL allowlist.
    • Mixed content: http:// script on https page — blocked or weakened.
    • SSRF: Server-side HTML generators fetching user-provided paths — separate concern but related.

    Performance impact

    CDN path optimization at Amazon serves WebP/AVIF via content negotiation on same path pattern. Wrong cache path bypasses edge — origin round trip every request.

    • HTTP/2: Too many relative paths to different origins — connection multiplication.
    • Preconnect: link rel=preconnect to CDN origin — href must match actual asset host.
    • 404 retry: JS fallback path loaders cause double fetch — fix HTML src first.

    Real production example

    Shopify Liquid — asset_url filter generates CDN absolute paths with shop ID; never hand-code /cdn/ paths. Stripe docs use root-relative /docs/assets/ in static build with base per deployment.

    • Env: Build injects PUBLIC_ASSET_PREFIX — HTML templates use placeholder.
    • Test: Link checker crawls staging with production-like base URL.
    • i18n: Locale prefix in path /fr/ — root-relative assets still work.
    html
    <link rel="icon" href="{{ 'favicon.png' | asset_url }}">
    <img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title | escape }}">

    Enterprise usage

    Enterprise static hosting on S3+CloudFront uses absolute asset URLs with version hash. CI linkinator runs on built HTML. Design system documents allowed path patterns for Storybook static dirs.

    • Monorepo: Public path /static/ mapped in webpack — HTML references consistent alias.
    • Preview deploys: Vercel preview URLs — avoid hardcoded production absolute links.
    • Governance: PR review checks for http:// and protocol-relative URLs.

    Common production failures

    Base href deploy on subdirectory microsite pointed all assets to wrong tenant — white page incident; 2-hour rollback. Root cause: copy-paste base from staging template.

    • SEO: Relative canonical links interpreted as duplicate paths — indexation split.
    • Email: Relative img src in web template copied to email — all images broken in clients.
    • Perf: Accidental absolute path to origin bypassing CDN — egress cost spike.

    Architecture review questions

    • Do all asset paths resolve correctly from deepest page URL depth?
    • Are CDN URLs HTTPS absolute with cache-busting fingerprints?
    • Does base element exist and is it intentional for this template?
    • Are there protocol-relative or http:// references on HTTPS site?
    • Do preload hrefs exactly match script/link src they optimize?
    • What does link checker report for this build artifact?

    Hands-on project

    Fix broken paths on a multi-page static site — standardize root-relative assets, add CI link checker, test from nested directory URL, document base href policy.

    • Deliverable: Zero 404s on asset crawl from three URL depths.
    • Verify: Lighthouse passes with all styles and fonts loading.
    • Stretch: Environment variable injection for CDN prefix in build.

    Interview questions

    How does the base element affect relative URL resolution and what are the risks?(Advanced)

    base href sets document base URL for all relative href/src/form action until overridden. Single wrong base breaks every relative asset and link. Affects anchor resolution, fetch URLs, and SVG use href. Staff avoid base in shared layouts or test exhaustively per route.

    Follow-up: Can you have multiple base tags?

    Root-relative vs absolute CDN paths for a Shopify-scale storefront?(Advanced)

    Platform filters generate absolute CDN URLs with shop-scoped paths — survives custom domains and email contexts. Root-relative works on single domain but breaks in RSS, AMP, and some email clients. Staff use platform helpers, not hand paths.

    Follow-up: Cache invalidation strategy?

    Mixed content and path schemes — what do you enforce in CI?(Advanced)

    Ban http:// asset URLs on HTTPS properties; reject javascript: and data: in link href from CMS; flag protocol-relative //; validate canonical and hreflang are absolute HTTPS. Stripe and Google use automated scanners on HTML artifacts pre-deploy.

    Follow-up: What about blob: URLs?

    Try it yourself

    Edit the HTML, CSS, or JS panels — the preview updates as you type.

    Try it yourself

    Preview

    Summary

    File path strings in HTML attributes resolve against document base and origin. Production pipelines at Shopify and Amazon generate paths via build tools and platform filters — hand-coded absolute URLs and careless base tags are a common deploy failure mode.

    Ready to mark this lesson complete?Track your journey across the entire course.