URL, URI, Domain, Path, and Query Explained
Understand the parts of a URL and how each piece affects routing, fetching, and sharing links.
URL, URI, Domain, Path, and Query Explained
Frontend engineers work with URLs constantly, but the pieces are easy to mix up. Knowing the parts makes routing, debugging, and deep linking much simpler.
URL Basics
A URL tells the browser where a resource lives and how to request it. It usually includes protocol, host, path, query string, and sometimes a fragment.
Domain and Host
The domain identifies the site, such as example.com. The host can include subdomains like app.example.com or api.example.com.
Path
The path identifies a route or resource under the host, such as /topics/how-web-works. In frontend apps, paths often map to client-side routes.
Query String
Query parameters add optional input to a URL, such as filtering or sorting. They are useful for shareable state like search results and pagination.
Fragment
The fragment, or hash, points to a location inside the page. Single-page apps often use it for in-page navigation or state that should not trigger a server request.
The Takeaway
URLs are not just strings. They are a structured interface between the browser, routing system, and server, and each part has a specific role in frontend behavior.
A URL is a type of URI that also tells you how to locate a resource. In practice, people often use URL for web links.
A domain name is the readable name for a site, like example.com, that DNS can translate into an IP address.
The path identifies the route or resource. The query string adds optional parameters like filters or pagination.
The fragment comes after `#` and points to a section of the page or client-side state without causing a new server request.
Because routes, deep links, filters, and shareable state are often encoded in the URL and must be parsed consistently.
Ready to master Frontend System Design completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master Frontend System Design
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.