How the Web Works

December 10, 2023
web
blog
notes

This is a short summary of how the general web works, for those who come from a background outside of CS/software engineering, or those with an innate curiosity.

Considering, this is the first post on this site, I feel it is pertinent that it relates to how this site, as well as all of the others on the World Wide Web, work.

A Short History

The World Wide Web (or Web in short) was invented by Tim Berners-Lee in 1989, whilst working at CERN. It is primarily an information system that enables content sharing over the Internet.

In other words, the Internet and the Web are two separate things. A common point of confusion for many people outside the field of IT and software related circles (myself included).

The Internet is the global system of interconnected computers which functions over the TCP/IP network protocol. Essentially it is a computer network.

The Web runs on the Internet, and is mainly concerned with web browsers and web servers, which this article will explore in further detail. A more detailed history on the Web and the Internet can be found here and here respectively.

Clients and Servers

As mentioned above, the Web is primarily made up of clients or more commonly known as web browsers, and web servers.

The model by which they work and communicate is called a Request-Response model. To use the lovely image provided by MDN below:

Client-server model

A client is usually something that connects to the internet for use, in order to view, retrieve or action some content. This is most often a web browser on a device, be it a computer/laptop/PC or mobile device, or any internet-capable device. However, this can also be any application on devices that connect to the Internet. Clients usually consume content on the Web.

A web server is a computer that stores webpages, sites or apps that are to be served (hence the word server) to the clients. A client connects to the Internet and then requests something on the Web - this request gets received by a server and the server sends back whatever was requested - hence the term Request-Response model. However, as you can imagine, this is a simplified explanation of the overall process.

The other moving parts

Besides the client and server themselves, there are a few other pieces that allow you to view a website or data in an app in real time. They are:

  • An internet connection: The de-facto tool piece required for anything to function on the Web - with no Internet you cannot access the Web (at least not a live version).

  • TCP/IP : The Transmission Protocol and Internet Protocol are the network and communication protocols upon which the Internet functions. Since the Web runs on the Internet, it has to adhere to these protocols in order to network and communicate effectively.

  • DNS: The Domain Name System is pretty much the address book for websites - the link you used to access this site has a domain name linked to it as this is its unique address on the Internet. The client requests this site using the domain name (which is part of the URL), and then the various protocols use the specified domain to find which server on the Internet holds the resources for the requested site.

  • HTTP: The Hypertext Transfer Protocol is a protocol that specifieds the language which is used by clients and servers to communicate with one another within the Request-Response model.

  • Component/resource files: Websites and apps are made up of many different files and resources, which are stored on the abovementioned servers, and sent to the client when they request to visit the site. These resources are sent back to the client (using the abovementioned Internet and communication protocols) and then the browser/client takes over in terms displaying the sent resources and files.

The overall process

So putting all the pieces together, what actually happens when you visit a website?

When you visit a website by clicking a link or typing a web-address into the browser, the following occurs (on a broad level):

  1. The browsers reads the address you’ve typed in, and then finds the IP address (Internet Protocol - a unique set of numbers which is linked to the DNS) of the server which holds the resources for the site you’ve requested. This is done by requesting the IP address from something called a DNS server.

  2. The browser then connects to the server holding the resources of the requested site using the received IP address as well as the TCP/IP and HTTP protocols. It requests all the necessary resources for that site in order to display/create a copy of it on your browser.

  3. If the request is approved by the server, the resources are sent back to the browser for it to display the website. The resources are sent as data in small chunks called data packets using the HTTP protocol.

  4. The browser receives all the required resources in the small data packets and then re-assembles them into a full-blown website, which then gets displayed to you. This is known as the rendering process.

Concluding remarks

In summary, there is a lot of computer wizardry that happens under the hood when you visit a website or use a web application. However, understanding the basic steps of the process is very useful when trying to determine what goes wrong in software development, or in life when for some or other reason your shopping cart does not want to checkout.

References

Props to the amazing people at MDN who put together such amazing documentation. This post was heavily inspired by their content and by no means intends to plagiarize from their hard work. References to referenced articles are linked below: