What we saw above is called an absolute URL, but there is also something called a relative URL. The URL standard defines both — though it uses the terms absolute URL string and relative URL string, to distinguish them from URL objects (which are in-memory representations of URLs).
Let's examine what the distinction between absolute and relative means in the context of URLs.
The required parts of a URL depend to a great extent on the context in which the URL is used. In your browser's address bar, a URL doesn't have any context, so you must provide a full (or absolute) URL, like the ones we saw above. You don't need to include the protocol (the browser uses HTTP by default) or the port (which is only required when the targeted Web server is using some unusual port), but all the other parts of the URL are necessary.
When a URL is used within a document, such as in an HTML page, things are a bit different. Because the browser already has the document's own URL, it can use this information to fill in the missing parts of any URL available inside that document. We can differentiate between an absolute URL and a relative URL by looking only at the path part of the URL. If the path part of the URL starts with the / character, the browser will fetch that resource from the top root of the server, without reference to the context given by the current document.
Let's look at some examples to make this clearer. Let's assume that the URLs are defined from within the document located at the following URL: https://developer.mozilla.org/en-US/docs/Learn.
https://developer.mozilla.org/en-US/docs/Learn itself is an absolute URL. It has all necessary parts needed to locate the resource it points to.
All of the following URLs are relative URLs:
Scheme-relative URL: //developer.mozilla.org/en-US/docs/Learn — only the protocol is missing. The browser will use the same protocol as the one used to load the document hosting that URL. Domain-relative URL: /en-US/docs/Learn — the protocol and the domain name are both missing. The browser will use the same protocol and the same domain name as the one used to load the document hosting that URL. Sub-resources: Common_questions/Web_mechanics/What_is_a_URL — the protocol and domain name are missing, and the path doesn't begin with /. The browser will attempt to find the document in a subdirectory of the one containing the current resource. In this case, we really want to reach this URL: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL. Going back in the directory tree: ../CSS/display — the protocol and domain name are missing, and the path begins with ... This is inherited from the UNIX file system world — to tell the browser we want to go up by one level. Here we want to reach this URL: https://developer.mozilla.org/en-US/docs/Learn/../CSS/display, which can be simplified to: https://developer.mozilla.org/en-US/docs/CSS/display. Anchor-only: #semantic_urls - all parts are missing except the anchor. The browser will use the current document's URL and replace or add the anchor part to it. This is useful when you want to link to a specific part of the current document.