## How to use URLs Any URL can be typed right inside the browser's address bar to get to the resource behind it. But this is only the tip of the iceberg! The HTML language (see Structuring content with HTML) makes extensive use of URLs: - to create links to other documents with the `<a>` element; - to link a document with its related resources through various elements such as `<link>` or `<script>`; - to display media such as images (with the `<img>` element), videos (with the `<video>` element), sounds and music (with the `<audio>` element), etc.; - to display other HTML documents with the `<iframe>` element. **Note:** When specifying URLs to load resources as part of a page (such as when using the `<script>`, `<audio>`, `<img>`, `<video>`, and the like), you should generally only use HTTP and HTTPS URLs, with few exceptions (one notable one being `data:`; see Data URLs). Using FTP, for example, is not secure and is no longer supported by modern browsers. Other technologies, such as CSS or JavaScript, use URLs extensively, and these are really the heart of the Web. ## Absolute URLs vs. relative URLs 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_web_development`. `https://developer.mozilla.org/en-US/docs/Learn_web_development` 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_web_development` — 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_web_development` — 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: `Howto/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_web_development/Howto/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_web_development/../Web/CSS/display`, which can be simplified to: `https://developer.mozilla.org/en-US/docs/Web/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.