URL
Uniform Resource Locator
In short
A URL is the address of a resource on the web, made of parts such as a scheme, a host, a path and a query string that tell a browser where and how to fetch it.
What is a URL?
A URL, short for Uniform Resource Locator, is the text address you type into a browser or use in code to point at a specific resource, such as a web page, an image, or an API endpoint. It says both where the resource lives and which protocol to use to retrieve it. Every link on the web is a URL.
Take https://shop.example.com:8443/products/42?color=red#reviews. Here https is the scheme, shop.example.com is the host, 8443 is the port (usually left out, because each scheme has a default), /products/42 is the path, ?color=red is the query string of key-value parameters, and #reviews is the fragment. The browser uses DNS to turn the host into an IP address, connects on the port, and sends the path and query string in an HTTP request, while the fragment never leaves the browser and is only used to jump to part of the page or by client-side code.
A URL works like a postal address: the city and building (the host) get you to the right place, the apartment number (the path) to the right door, and a note on the envelope (the query string) says what you want. Characters with special meaning, such as spaces, &, or ?, must be percent-encoded, so a space becomes %20, and in JavaScript the URL class and encodeURIComponent handle this for you. Short, readable URLs are also easier to share and help with SEO.
URL is often confused with URI and with domain name. A URI (Uniform Resource Identifier) is the broader term for any string that identifies a resource; every URL is a URI that also says how to reach it, while a URN such as urn:isbn:0451450523 names something without giving a location. A domain name like example.com is only one part of a URL, not the whole address.
Key takeaways
- A URL is the address of a resource, combining where it is and how to fetch it.
- Its main parts are the scheme, host, optional port, path, query string, and fragment.
- The fragment after
#stays in the browser and is not sent to the server. - Special characters must be percent-encoded; for example, a space becomes
%20. - Every URL is a URI, but not every URI is a URL.
Example
const url = new URL("https://shop.example.com:8443/products/42?color=red#reviews");
console.log(url.protocol); // "https:"
console.log(url.hostname); // "shop.example.com"
console.log(url.port); // "8443"
console.log(url.pathname); // "/products/42"
console.log(url.searchParams.get("color")); // "red"
console.log(url.hash); // "#reviews"
// Add a query parameter safely; special characters are encoded for you
url.searchParams.set("q", "red shoes & socks");
console.log(url.search); // "?color=red&q=red+shoes+%26+socks"Readers ask
What is the difference between a URL and a URI?
A URI is any string that identifies a resource, while a URL is a URI that also tells you how to reach it, such as https://example.com/about. In everyday web development, the two words are often used interchangeably.
What is a query string in a URL?
The query string is the part after ?, made of key=value pairs separated by &, as in ?page=2&sort=price. It passes extra parameters to the server, such as search terms, filters, or the page number.
Are URLs case-sensitive?
The scheme and host are not, so EXAMPLE.com and example.com reach the same site. The path and query string can be case-sensitive depending on the server, so /About and /about may be different pages.
See also
- HTTPWeb Development, p. 19HTTP is the protocol that browsers, apps, and servers use to exchange web pages and data through a simple cycle of requests and responses.
- DNSDevOps & Cloud, p. 16DNS is the internet's naming system that translates human-readable domain names like example.com into the numeric IP addresses computers use to connect.
- Web BrowserWeb Development, p. 57A web browser is an application that fetches web pages from servers and turns their HTML, CSS, and JavaScript into the interactive pages you see on screen.
- EndpointBackend & APIs, p. 12An endpoint is a specific URL, combined with an HTTP method, where an API receives requests and returns responses for one particular resource or action.
- HTTPSSecurity, p. 17HTTPS is the secure version of HTTP that encrypts traffic between a browser and a website with TLS, protecting data from eavesdropping and tampering.
- SEOWeb Development, p. 39SEO is the practice of improving a website's content and technical setup so that search engines can find, understand, and rank its pages for relevant searches.
- Domain NameWeb Development, p. 14A domain name is the human-readable address of a website, such as example.com, which the DNS system translates into the IP address of the server that hosts it.
- Character EncodingProgramming Fundamentals, p. 8Character encoding is the set of rules that turns text into bytes and back again, so any letter can be stored and sent; today the standard is UTF-8.
- Base64Programming Fundamentals, p. 5Base64 is a way to write any binary data, such as an image or a key, using only 64 safe text characters, so it can pass through systems built for text.
Spotted a mistake or something missing on this page?Suggest an edit