How the Web Works
Tags: webdev, html, programming
Published: 2023-09-29 05:35:20

Have you ever wondered how the web works? In this section, I am going to tell you exactly what happens the moment you type the address of a website into your browser and hit ENTER. 

As part of this, we are going to talk about a few important concepts and terms that you need to know as a web developer. 

So, lets say we launch our browser and go to a website like `https://www.microsoft.com`.

Now this address that we have in the address bar is called a URL, which is short for Uniform Resource Locator. Basically, it is a way to locate a resource on the internet.

Resources can be:

- Web Pages (HTML Documents)
- Images
- Video Files
- Fonts

and so on.

![Google URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/keighm2wipfo772dfhr2.png 'Google URL')

So, we type the URL and press ENTER. What happens now?

Well, there are two pieces involved here:

![Client and Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2q36snyte87hxchk0m5.png 'Client and Server')

- The Browser (also called the Client)
- The Server (the computer or computers that host our target website). We refer to these as Web Servers or Servers for short.

This is what we call the client-server model. The client requests a service, the server provides the service. 

![Client-server model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62la7mjybodzpa3iktu5.png 'Client-server model')

So, our browser sends a message to the server, and says, "Hey! Give me the homepage of this website."

![Man typing on a browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igtu70jsaswhh1abvcym.png 'Man typing on a browser')

This is kind of similar to how you send your friend a text message. You can think of your phone as the client sending the message, and your friend's phone as the server receiving the message.

![Man and woman typing with the man representing the client, and the server representing the server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdz53209k39dqnpu4894.png 'Man and woman typing with the man representing the client, and the server representing the server')

Now to our example. This message is formatted based on a protocol called HTTP (HyperText Transfer Protocol). 

You have probably noticed it before, but never knew what it was.

![Pointing to https in a Google URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcw4v41lrynrjr52hjgx.png 'Pointing to https in a Google URL')

In simple terms, HTTP is a protocol that clients and servers use to talk to each other. It is not a programming language. It is just a plain textual language for communicating over the internet. 

We also have HTTPS, which is HTTP + Encryption. So the messages exchanged between the client and the server are encrypted in this case. 

Here is a simplified example of an HTTP message:

```
GET /index.html HTTP/1.1
Host: www.microsoft.com
Accept-Language:en-us
```

With this message, the browser tells the server what it is looking for. 

So, on the first line it says that it wants to `GET` a page or a file called `index.html` using `HTTP version 1.1`. `Index.html` often represents the homepage of websites.

On the second line we can see the host, that is `www.microsoft.com`.  

On the third line, we can see the language `en-us` that the client can accept. In this case, it is English.

Now, don't worry about memorizing any of this. All I want you to understand here is that this message is structured based on the `HTTP` protocol that clients and servers understand. 

So, the server receives this message and figures out what the client is asking. Then it will send a message back to the client.

![Client and server communicating back and forth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/meqvqbbkpfd49addmu02.png 'Client and server communicating back and forth')

The first message is called an HTTP request. 

![https://github.com/freeCodeCamp/freeCodeCamp/assets/33565767/6015f49a-d10d-4fd8-9b79-5c901f7d3f1d](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kyvobukaozwd6s6t6ni.png 'https://github.com/freeCodeCamp/freeCodeCamp/assets/33565767/6015f49a-d10d-4fd8-9b79-5c901f7d3f1d')

The second message is called an HTTP response.

![Client sending a request to the server and the server sending the response](https://github.com/freeCodeCamp/freeCodeCamp/assets/33565767/e4b423d7-8317-47fe-8ef8-134815add2dc 'Client sending a request to the server and the server sending the response')

![Client sending a request to the server and the server sending the response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8gs6cbkezgp8jz0o7vt.png 'Client sending a request to the server and the server sending the response')

Every data exchange using the HTTP protocol involves two messages: a request and a response. 

Now, what is in the response? Here is a simplified example:

```
HTTP/1.1 200 OK
Date: 6th April 2023
Content-Type: text/html


<!DOCTYPE html>
<html>
...
</html>
```

On the first line, we see the version of the HTTP protocol used, followed by a number (200), which is the status code. 200 means successful or OK.

Right below that, we can see the date and time of the response.

Next, we can see the type of content the server is sending back to the client. In this `text/html`.

After that, we can see the HTML code, or the HTML Document, that represents the homepage of  `www.microsoft.com`. Of course, the actual HTML code is way longer.

Now, as the browser reads this HTML document, it constructs what we call a DOM (Document Object Model). Don't let this fancy name scare you. This is the model that represents the objects or elements in our HTML document. 

What are these elements? All the building blocks of our page like paragraphs of text, images, links, and other stuff. You will see these in action in the next section.

Now, as the browser is reading this HTML document that is returned from the server, it discovers references to other resources in this document like images, fonts, and other things.

Each of these resources has an address or a URL. So, for each resource, the browser sends a separate HTTP request to the server to fetch that resource.

![The browser sending an HTTP request to the server to fetch that resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xil8si23rj97naoea9u.png 'The browser sending an HTTP request to the server to fetch that resource')

Many of these HTTP requests are sent in parallel, so we can see the page as quickly as possible. 

Once the browser has all the necessary resources, it will render the HTML document.

![Browser rendering the HTML document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd41k7qa8wkhf4suxl77.png 'Browser rendering the HTML document')

Rendering an HTML documents means displaying it. It is a fancy technical term we use often. 

So, in a nutshell, our browser sends an HTTP request to the server and receives an HTTP response. This HTTP response contains an HTML document.

![Client sending an HTTP request to the server and receives an HTTP response which contains an HTML document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4z2ojg716p4rvpo9wxlx.png 'Client sending an HTTP request to the server and receives an HTTP response which contains an HTML document')

The browser reads that HTML document to construct a DOM (Document Object Model) and render the page.

![Browser reads the HTML document to construct a DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksl5v9etbizx63ssu3th.png 'Browser reads the HTML document to construct a DOM')

In the next article, I am going to show you all of these steps in action.

I have a complete HTML/CSS/JavaScript eBook (Zero to Hero) that you can read in your free time.

You can [get the eBook here](https://karlgusta.gumroad.com/l/edtbb).

Happy Coding!