I'm not about to start a civil war about URI vs URN vs URL, but it would be nice to know what that string in my browser actually means; so, we're taking a quick look at the anatomy of the URL. In future posts we'll be looking at single page applications, hash routing and APIs, which is where this post will come in handy.
Protocol
http://api.github.com/user/name?key=value#details
Although it sounds like some kind of bacteria the "protocol" really just determines the rules which need to be followed when connecting one computer to another. Think "we must follow the proper protocol when visiting the president".
Common protocols:
- http: The standard protocol for web pages.
- https: A secure protocol for web pages.
- ftp: A protocol for transferring files between computers.
- ssh: A secure protocol used by administrators to access remote computers.
- imap: An email protocol commonly used by providers like Gmail.
Domain
Domains are made up of 3 parts.
- Subdomain
- http://
api.github.com/user/name?key=value#details
Usually indicates a separate part of a website with its own front page, ex. support.domain.com or docs.domain.com, but can also be found on other protocols like mail.google.com for imap. - Domain Name
- http://api.
github.com/user/name?key=value#details
The primary domain name ex. google.com, or github.io. When we refer to a domain name we commonly include the TLD. - TLD
- http://api.github
.com/user/name?key=value#details
The Top Level Domain which can be used to identify the primary purpose of the website. .com is the most common in the US and is primarily used for commercial websites. Other TLDs include, for example, .org(anisation), .co(ommercial).uk (United Kingdom), .io (Indian Ocean Territories, commonly used by tech firms for its similarity to I/O or input/output). I'm not going to explain what you'd use .restaurant for - it'll be in the test though.
Route
http://api.github.com/user/name?key=value#details
The route tells us which page we're visiting at the domain and resembles a folder path; sometimes it actually is one. Some routes include a file extention like .html or .php.
Parameters
http://api.github.com/user/name?key=value#details
The parameters are also known as a query string. Queries are made up of strings like this=that and are separated by &. A question mark separates the query string from the route. Query strings allow us to make pages dynamic by ex. filtering results shown on a page using certain search queries like name=bob. This is easy to spot when you look at the url for your Google search. We can also do other things with query strings, like remember form data. Query strings are very useful when working with web APIs, but I think we'll cover that in another post.
Hash Route
http://api.github.com/user/name?key=value#details
A hash route is commonly used to take you to a specific section of a page. The most common hash route is found when using anchor tags, for example:
https://en.wikipedia.org/wiki/Query_string#URL_encoding
will take you directly to the section on URL Encoding on that page.
Hash routes are also used in single page JavaScript applications to load dynamic content and allow saving the state of the application to history. A super example of this can be found on Matt Keas's Arbiter Frame. Start typing in the left frame and you'll see how the hash route is changing. You can grab that url and open it in another browser and the application will reload with everything you typed. Magic.