HTML and URLs
Every HTML document which is accessible via the web, is located at some URL. The word URL is short for Uniform Resource Locator. The URL is the "address" on the web of the HTML document.
URLs as Addresses of Resources
When you want to view a HTML document in a browser, you type in the URL of the document into the browsers address bar.
Here is an example URL:
This URL consists of three parts:
- Resource path
All three parts are illustrated here:
|A URL consists of a protocol name, domain name, and resource path.|
The protocol tells what protocol is needed to access the resource the URL points to.
Typically the protocol is either
The domain is a name that is translated into an IP address. Thus, the domain name really points to a server
somewhere on the internet. This is the server hosting the resource. In the example above the domain
The resource path is the location of the resource within the server the resource is hosted on.
In the example above, the resource path is
/books/jquery/index.html . The resource
path can be thought of as a logical directory structure. In the example above, the resource path
contains two logical directories:
A URL can contain a query string. Here is an example:
The query string part of the above URL is:
The query string starts with a
? character, and then comes one or more
pairs. Each pair is separated by an
& character. In the example above the query string contains
name=value pairs. The
param1=value1 and the
The name of a
name=value pair is the name of a parameter passed to the server where the
resource is hosted. The value is the value of the parameter named by the name.
It is up to the server how it interprets the query string, and whether a query string is needed at all to access a given resource. If a resource does not need a query string in its URL, but you add one anyways, the server typically just ignores the query string.
A URL can contain a fragment identifier. A fragment identifier points to (identifies) a fragment of the HTML document the URL points to. Fragments are typically only used in HTML documents. Using a fragment identifier in the URL you can point not only to the HTML document itself, but to a location inside the HTML document. This is covered in more detail in the text about links.
Here is an example of a URL with a fragment identifier:
The fragment identifier is appended after the
# character. Thus, the fragment
identifier in the example above is
The fragment identifier has to point to a fragment ID in the target HTML document. How to insert that, is explained in the text on links.
A URL can consist of just the fragment identifier. Here is an example:
In that case the URL is interpreted as pointing to a fragment ID inside the same document as the URL is contained in.
In case a URL has a query string appended to it, the fragment identifier is appended after the query string. Here is an example URL with both query string and fragment identifier:
A URL can be relative. A relative URL consists of just the resource path itself.
A relative URL is interpreted relative to the URL of the HTML document that contains the URL. Thus, if the URL of the HTML document containing the URL is:
then all relative URL's inside that HTML document are intepreted as being relative to that URL.
A relative URL containing just a document name, e.g.
html-book.html is interpreted
as being located in the same logical directory as the
page. That means in the logical directory
/books/jquery. The full resource path
will be interpreted as:
The protocol and domain name is also interpreted as being the same as the document containing the
relative URL. Thus, the resource path
/books/jquery/html-book.html is interpreted
to be located at the URL:
You can use two dots (
..) to signal that the relative URL points one directory up
from the resource path of the document containing the URL. Thus, this relative URL
found inside a HTML document at the resource path
be interpreted as the resource path:
Notice how the directory
jquery is cut off the resource path, before the rest of the
relative URL is appended to it.
The full URL will be interpreted as:
You can use multiple dots (
..) separated by a slash character (
/) if you want
the relative URL to go up more than one logical directory. Thus, the relative URL
inside a document located at resource path
/books/jquery/index.html, will be interpreted
Notice how both the
jquery logical directory path is cut off the
documents URL, before the rest of the relative URL is appended to it.
The full URL will be interpreted as:
A relative URL that starts with the slash (
/) character is always interpreted as
being relative to the root of the logical directory hierarchy, instead of to the URL of the document
Here is an example of a URL that is relative to the root of the logical directory structure:
It doesn't matter what the URL is of the HTML document containing this URL, it will always be interpreted the same - as relative to the root of the logical directory hierarchy.
The Advantage of Relative URL's
It can be an advantage to link internally between pages in your website using relative URL's instead of full URL's including protocol and domain name.
Often when you develop a website on your local machine, the web server
is running on the URL
http://localhost:8080. If you use a full URL in your links and URL's,
you will need to search and replace all URL's before putting the website online, on e.g. a domain
Using relative URL's, though, the URL's will be interpreted as being either relative to
or your websites domain (e.g.
http://jenkov.com), depending on where you access the website.
This makes development a lot easier, since you don't have to change URL's before uploading the website to the web server.