URIs and URLs
The World Wide Web can be conceived as a large group of resources placed in different computers, all around the world. To make references and find these resources, the web relies on URI, a system that's been designed to name and locate a specific resource in an unambiguous way. The generic structure of a URI is described below:
- Protocol: also called URL scheme, this component specifies the protocol that needs to be used to access the document or resource.
- Computer name: gives the name of the computer (usually a domain name or IP address) where the content is hosted.
- Directories path: a secuence of directories separated by slashes that define the path to follow in the computer to reach the resource.
- File: the name of the file where the resource is contained.
The following example shows a URI with all its parts labeled.
However, it's not required to use all these components to conform a valid URI. Many URIs may have only some of these parts present (or none) and still be valid. The following list shows some examples of valid URIs.
18.104.22.168/backup/(no protocol; no file)
http://yeahyeah.com/(no directories; no file)
/john/work/report.odt(no protocol; no computer name)
index.html(no protocol; no computer name; no directories)
/(no protocol; no computer name; no directories; no file)
A URL is a particular type of URI that always includes information about how to access the resource identified. In practice, this information is composed by the protocol and, for web use, the computer name. The following list shows some examples of valid URLs.
A relative URI is a URI that doesn't provide the protocol used to access the resource nor the name of the computer hosting it, and therefore can only be used to refer to another document in the same computer. The information it presents is to be considered as a path relative to the location of the current document conaining the URI or, in other words, instructions to go from this document to the destination resource.
Browsers in charge of processing the document, construct a new full URI using the relative URI together with the base URI, traversing the directories structure from the originating document's location to the destination resource. This concept will be better depicted with the following example.
A document located at "http://www.exampleserver.com/documents/index.html" has a link with the following relative URI: "2015/global-warming.pdf". When a browsers need to solve this relative URI, it will first extract the base URI from the originating document's location, removing the file name. In this case, the base URI obatining would be "http://www.exampleserver.com/documents/". From there, the browser can, in this particular case, just append the relative URI to the base URI, obtaining the resource's full address, that in this case would be "http://www.exampleserver.com/documents/2015/global-warming.pdf".
In some cases, the relative URI may have the special directory "..", which instruct browsers to move one level up in the directory structure. For example, if the document used in the example above, located at "http://www.exampleserver.com/documents/index.html", presents a link with the relative URI "../images/earth.jpg", the browser in charge of processing it would extract the base URI from the originating document ("http://exampleserver.com/documents/"), would move from there one level up in the directory structure ("http://www.exampleserver.com/") and would then append the rest of the relative URI. In the end, the obtained URI would be "http://www.exampleserver.com/images/earth.jpg".
For more information about interlinking resources in websites, refer to the tutorial "Organizing a website".
A URI pointing to a resource may also contain information about the location of a specific part or fragment in that resource. This information is known as fragment identifier.
In HTML, a URI can be used to locate a specific section of the document, using the value of the
id attribute of the element you want to refer to as fragment identifier. For example, the previous
section, called "Relative URIs", has the value "relative-uris" in its attribute
id. A link that points specifically to that section could be created, appending to the URI of this document the hash sign ("#") and the value of its
id attribute (http://www.htmlquick.com/reference/uri-url.html#relative-uris).
Browsers usually scroll down to the specified section, when a link with a fragment identifier is activated. You can test this functionality by following this link pointing to the Relative URIs section in this same document.