Skip to main content

📓 How the Web Works: Uniform Resource Locator

As discussed in the last lesson, when we navigate to https://www.learnhowtoprogram.com/tracks in our browser, the browser (or client) makes a request to the web server where that page's content is stored.

One of the most important pieces of this request is the specific address of the content we're attempting to view. This address is called the URL, short for Uniform Resource Locator, or URI, short for Uniform Resource Identifier. (The difference is largely semantic.) In this lesson we'll explore the URL in detail.

URL Elements​

Certain elements must be included in the URL for a request to be successful. For instance, if we were requesting content at the URL https://www.learnhowtoprogram.com/tracks, these elements could be identified as:

  1. Scheme: http://

  2. Host: www.learnhowtoprogram.com

  3. Path: /tracks

Let's discuss each in greater detail.

1. Scheme​

The scheme denotes how the client will locate or interact with the requested resource. In the example above, the client will make a request using the http:// scheme.

Other schemes include ftp, mailto, and file. The scheme is always followed by a colon. And, for the http scheme in particular, a colon and two slashes (://).

2. Host​

The host details where the requested resource is located. In a URL the host is either the domain name or the IP address. In our example the host is www.learnhowtoprogram.com.

3. Path​

The path consists of one or more segments separated by slashes. It provides a name for identifying the specific resource requested. In our example the path indicates the resource: /tracks.

Optional URL Elements​

Not all elements in a URL are required. Here are two that are optional.

? Query​

There may be times when URL contents must provide additional details for a resource to be identified. For example, if we use the search functionality on Learn How to Program, the server must know what term(s) we've searched for to return relevant information.

When we enter "internet" into the search bar on DuckDuckGo and submit, the request is made to this URL:

https://duckduckgo.com/?q=internet&va=n&t=hu&ia=web

Notice the ? symbol after the path. This indicates the beginning of a query string. There are 4 key-value pairs that make up the parameters sent in this request:

  • q=internet
  • va=n
  • t=hu
  • ia=web

Our search parameter is one of them. It has a key of q and a value of internet. Query parameters are separated by the & symbol when there is more than one. The server will use this value to query the database for lessons whose text contains the term internet.

# Fragment​

Another optional URL element is called a fragment. Here is an example URL containing a fragment:

http://guides.rubyonrails.org/active_record_basics.html#validations

Fragments begin with a # symbol. They contain information that's typically processed by the client instead of the server.

In this example, the page at http://guides.rubyonrails.org/active_record_basics.html is quite long. It contains many different sections, each nested in their own div within the HTML. validations is the id of one of these divs. By adding it as a fragment to the end of the URL, our client hops to that area of the otherwise-long page automatically. Try it out:

  • Visit the example link by clicking here.

  • In your browser's URL bar, change the portion of the URL reading validations to callbacks.

  • Notice how the page then repositions to display the callbacks section at the top of the browser window.

  • Then remove this fragment from the URL entirely. Notice the position returns to top of the document.