How Your Browser Talks to the Internet: HTTP Explained

Nitin GumberNitin Gumber
14 min read

What is Internet?

The Internet is a global network of computers and devices connected to each other, allowing people to share information and communicate instantly. It works through a system of cables, satellites, and wireless signals, enabling us to access and exchange data no matter where we are in the world.

The Internet is a global network of computers and devices connected to each other, allowing people to share information and communicate instantly. It works through a system of cables, satellites, and wireless signals, enabling us to access and exchange data no matter where we are in the world.

How Does the Internet Work?

The Internet moves data from one place to another in small packets of information. These packets travel through cables, routers, and servers, eventually reaching your device. For example:

  • When you search for something on Google, your computer sends a request to a Google server. The server processes the request and sends the search results back to your screen.

Real-World Examples

  1. Google Search: When you type a question, the Internet connects you to Google's servers, which find the answer and deliver it back to your device in seconds.

  2. Online Shopping: Websites like Amazon or Flipkart let you browse and buy products, with payment and order tracking happening entirely over the Internet.

  3. Video Calls: Platforms like Zoom or WhatsApp allow you to talk to people from anywhere in the world as if they were next to you, using the Internet to transfer voice and video.

  4. Streaming: Watching shows on Netflix or YouTube happens because the Internet delivers video files from their servers to your device.

  5. Smart Homes: Devices like Alexa or Google Home use the Internet to perform tasks like playing music, controlling lights, or checking the weather.

What is WWW?

The World Wide Web (WWW) is a system of websites and web pages that you can access through the Internet. It’s what makes the Internet useful and easy to navigate by organizing information into clickable links. The WWW is where you find things like text, images, videos, and other content that you view in a browser like Chrome, Firefox, or Safari.

How the WWW Works:

  1. When you type a URL into your browser, the browser sends a request to the website’s server.

  2. The server sends back the web page’s data (text, images, etc.).

  3. Your browser displays the web page for you to interact with.

Difference Between Internet and WWW:

  • The Internet is the physical network of computers and devices.

  • The WWW is the collection of web pages and information that you can access using the Internet.

Real-World Example:

  • Using Google: When you search for something, Google’s web servers return a list of web pages (part of the WWW) that match your search.

  • Visiting a Blog: Reading a recipe on a food blog involves accessing a specific web page on the WWW.

What is a Protocol?

A protocol is a set of rules or instructions that devices (like computers, phones, or servers) follow to communicate with each other. Think of it as a common language or guideline that ensures different devices understand each other when they share information.

Real-Life Analogy: A Traffic Signal 🚦

Imagine a busy intersection:

  1. The traffic signal has a set of rules (red means stop, green means go, and yellow means slow down).

  2. Drivers (computers) follow these rules so that cars don’t crash into each other and everything runs smoothly.

  3. Without the traffic signal rules, there would be chaos!

Similarly, in the world of computers, protocols are the rules that prevent confusion and make communication possible.

Examples of Common Protocols

  • HTTP (HyperText Transfer Protocol): Used for browsing the Internet. It’s like the messenger that delivers web pages to your browser.

  • FTP (File Transfer Protocol): Helps you send and receive files over the Internet, like uploading photos to a server.

  • SMTP (Simple Mail Transfer Protocol): Used for sending emails.

  • TCP/IP (Transmission Control Protocol/Internet Protocol): The foundation of the Internet; it makes sure data travels safely between devices.

  • DNS (Domain Name System): Converts website names (like www.google.com) into IP addresses that computers understand.

What is HTTP?

HTTP stands for HyperText Transfer Protocol. It is a set of rules that computers use to communicate with each other on the Internet. Imagine it as a language that helps your computer and a website's computer understand each other.

How Does HTTP Work?

  • You Open a Browser: When you type a website's address, like www.google.com, in your browser, your computer sends a request using HTTP to the website's server.

  • The Server Responds: The server receives your request and sends back the webpage, images, or videos.

  • Your Browser Shows the Content: Your browser takes this information and displays the webpage on your screen.

Real-Life Analogy: Ordering Pizza 🍕

Let’s compare HTTP to ordering pizza from your favorite restaurant:

  1. You place an order: You call the restaurant and tell them you want a pizza (this is like your computer sending an HTTP request to the server).

  2. The restaurant prepares your order: The kitchen makes the pizza (the server processes your request).

  3. Pizza delivery: The delivery person brings the pizza to your home (this is like the HTTP response bringing the webpage to your browser).

  4. You eat the pizza: You enjoy the pizza at home (you see the webpage on your screen).

What is HTTP Headers?

HTTP headers are like little notes or pieces of information that are sent between a browser (like Chrome or Firefox) and a server (where a website's data is stored) whenever we request a webpage or send information to a website. These headers tell the server important things, such as what kind of data is being sent, what kind of response is expected, or how long the information can be stored.

Think of it like when you send a letter to someone. On the envelope, you write the sender's address, the recipient's address, and sometimes extra instructions, like "urgent" or "handle with care." Similarly, HTTP headers are like these extra instructions that help the server understand how to handle the request and respond back.

Example in Real Life:

Imagine you want to go to a library and borrow a book. You (the browser) give a librarian (the server) a form with the book name (the request). The librarian looks at the form and gives you the book (the response). But, the form can have extra instructions (headers) such as:

  • "Please give the book only if it's available."

  • "I'm looking for a book in this language (English)."

These extra instructions (HTTP headers) help the librarian understand how to find and give you the book.

HTTP Header Example:

Let's say you are visiting a website. When your browser sends a request to the website, it might send these headers:

GET /home HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
  • GET /home HTTP/1.1: This is the request to visit the "home" page.

  • Host: www.example.com: It tells the server where to find the website.

  • User-Agent: It tells the server what kind of browser you are using (like Chrome, Firefox).

  • Accept: It tells the server what kind of data (like HTML, images) your browser can handle.

When the server receives this request, it knows what to send back, such as a webpage or an image, based on the headers.

HTTP Response Header Example:

Once the server responds to the request, it might send back these headers:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1024
Cache-Control: no-cache
  • HTTP/1.1 200 OK: This means the request was successful.

  • Content-Type: This tells the browser that the response is in HTML format.

  • Content-Length: It tells the browser the size of the data.

  • Cache-Control: It tells the browser whether it should store this data for later use.

In simple words, HTTP headers are like instructions that help browsers and servers communicate better and understand each other.

Request-Response Model

In the Request-Response Model, communication between a client (such as a web browser or app) and a server follows a standardized flow. This flow involves requests made by the client and responses sent by the server, each with its own set of methods and corresponding status codes.

Let’s break down the complete model for GET, POST, PUT, and DELETE requests, explaining both the request types and their response codes in detail.

1. GET Request - Response (Retrieve Data)

Request:

  • Purpose: The GET request is used when the client wants to retrieve data from the server. The client does not send any data to the server (except in the URL itself), it simply asks for information.

  • Real-World Example: You open a webpage by typing the URL in your browser. You’re simply asking for the page, not changing anything.

      GET /home HTTP/1.1
      Host: www.example.com
    

    Response:

    • After receiving the GET request, the server processes it and sends back a response, which is the requested data, such as a webpage, image, or document.

Response Codes:

  • 200 OK: The request was successful, and the server returns the requested data (e.g., a webpage).

  • 404 Not Found: The requested resource (e.g., the webpage) was not found on the server.

  • 500 Internal Server Error: The server encountered an error while processing the request.

      HTTP/1.1 200 OK
      Content-Type: text/html; charset=UTF-8
      Content-Length: 1024
      <html>...</html>  <!-- Content of the webpage -->
    

2. POST Request - Response (Send Data or Create Data)

Request:

  • Purpose: The POST request is used when the client needs to send data to the server, typically to create new data (e.g., submitting a form or uploading a file).

  • Real-World Example: You place an order at a restaurant, providing your details (data) to the waiter (the server). The server uses this data to create something new, like an order in the system.

      POST /submit-form HTTP/1.1
      Host: www.example.com
      Content-Type: application/json
    

    Response:

    • After receiving the POST request, the server processes the data and typically creates a new resource (like a new user or post). The server then sends back a response confirming the action.

Response Codes:

  • 201 Created: The resource was successfully created (e.g., a new user, post, or record).

  • 400 Bad Request: The data provided in the request was invalid or incomplete.

  • 500 Internal Server Error: An error occurred on the server while processing the request.

      HTTP/1.1 201 Created
      Content-Type: application/json
      Location: /new-item/1234
    

3. PUT Request - Response (Update Data)

Request:

  • Purpose: The PUT request is used when the client needs to update or replace existing data on the server. This is commonly used for editing information, like updating a user profile or changing an item in the database.

  • Real-World Example: Imagine you’re at the restaurant and ask the waiter to change part of your order (like replacing a side dish). You’re not creating a new order, just modifying the existing one.

      PUT /update-profile HTTP/1.1
      Host: www.example.com
      Content-Type: application/json
    

    Response:

    • After processing the PUT request, the server sends back a response confirming the update. If the update was successful, the server might return the updated data or simply a success message.

Response Codes:

  • 200 OK: The update was successful, and the server returns updated data or a success message.

  • 204 No Content: The update was successful, but there is no need to return any content.

  • 400 Bad Request: The data for the update is invalid or incomplete.

  • 404 Not Found: The resource you tried to update does not exist.

      HTTP/1.1 200 OK
      Content-Type: application/json
      {
        "message": "Profile updated successfully"
      }
    

4. DELETE Request - Response (Delete Data)

Request:

  • Purpose: The DELETE request is used when the client wants to remove data from the server. It’s a request to delete a specific resource (like a post, comment, or user account).

  • Real-World Example: Imagine you’re at a restaurant and you change your mind about an item you ordered, asking the waiter to delete it from your order.

      DELETE /remove-item HTTP/1.1
      Host: www.example.com
    

    Response:

    • After receiving the DELETE request, the server removes the resource and confirms that the deletion was successful.

Response Codes:

  • 200 OK: The resource was successfully deleted, and the server sends a confirmation message.

  • 204 No Content: The deletion was successful, but there’s no content to return (empty body).

  • 404 Not Found: The resource to delete was not found.

      HTTP/1.1 204 No Content
    

Summary of Request Methods and Responses:

MethodPurposeCommon Response Codes
GETRetrieve data200 OK (success), 404 Not Found (not found), 500 (error)
POSTSend data or create new data201 Created (success), 400 Bad Request (invalid), 500 (error)
PUTUpdate or replace existing data200 OK (success), 204 No Content (success), 400 (invalid), 404 (not found)
DELETEDelete data200 OK (success), 204 No Content (success), 404 (not found)

Version of HTTP?

The HTTP (HyperText Transfer Protocol) has evolved over the years to improve performance, security, and efficiency. There have been several versions of HTTP, with each new version building upon the previous one. Here are the major versions of HTTP:

1. HTTP/0.9 (1991):

  • Overview: This was the very first version of HTTP, designed by Tim Berners-Lee, the inventor of the World Wide Web. It was very simple and only supported GET requests (no headers, no status codes, no other HTTP methods).

2. HTTP/1.0 (1996):

  • Overview: This version introduced support for headers, allowing more structured requests and responses. It also supported more HTTP methods, such as POST and HEAD

3. HTTP/1.1 (1997):

Overview: This is the most widely used version of HTTP today. It introduced important improvements, especially for performance and persistent connections. It also included features like chunked transfer encoding and cache control.

4. HTTP/2 (2015):

  • Overview: HTTP/2 was designed to improve performance, especially for websites with many resources (images, scripts, etc.). It focused on reducing latency and optimizing how data is sent between the client and server.

5. HTTP/3 (2022):

  • Overview: HTTP/3 is the latest version, which is designed to further improve performance and reliability, especially in mobile and high-latency environments. It is based on QUIC (Quick UDP Internet Connections), a transport layer protocol developed by Google.

When is Each HTTP Version Used?

  • HTTP/1.0 and HTTP/1.1: Still widely used by many websites and applications, especially those that don’t require complex data or high performance.

  • HTTP/2: More commonly used today, especially on modern websites where performance matters. It's supported by most major browsers and servers.

  • HTTP/3: Still in the process of being adopted but growing quickly. It's supported by most major browsers (Chrome, Firefox, and Edge) and is becoming popular for high-performance websites, especially with mobile devices or networks that suffer from packet loss.

Conclusion:

  • HTTP has gone through several versions, each improving performance, security, and efficiency.

  • HTTP/1.x versions were focused on simplicity and flexibility, while HTTP/2 and HTTP/3 brought advanced features like multiplexing, header compression, and QUIC to optimize speed and reduce latency.

  • HTTP/3 is the future, especially for mobile and high-latency applications, providing even faster speeds and better security than its predecessors.

What is TLS?

TLS stands for Transport Layer Security, and it is a cryptographic protocol used to secure communication over a computer network. In simpler terms, TLS ensures that the data sent between your computer (client) and a server (website) is encrypted and cannot be easily intercepted or tampered with by hackers.

TLS in Action (HTTP + TLS = HTTPS)

When we talk about HTTPS, it stands for HyperText Transfer Protocol Secure. It's the secure version of HTTP, which is the protocol used for transferring web pages and other resources over the internet. The "S" in HTTPS stands for Secure, and this security is provided by TLS (or its predecessor, SSL).

Here’s a simple way to understand how HTTP + TLS = HTTPS:

  1. HTTP: This is the basic protocol for transferring data (like webpages) between a browser (client) and a web server. However, HTTP by itself does not provide any encryption. So, data transferred via HTTP can be intercepted and read by anyone between your browser and the server.

    • Example: You type a website address like http://example.com. This means the communication is not secure and can potentially be intercepted.
  2. TLS: TLS is a technology that ensures that the data you send and receive is encrypted. It provides privacy (so no one can see your data), integrity (so no one can change the data), and authentication (so you can trust the website you are communicating with).

    • Example: When you connect to a secure website, TLS creates a secure encrypted connection.
  3. HTTPS: This is simply HTTP combined with TLS to create a secure connection. When you visit a website that uses HTTPS, your browser and the website's server use TLS to encrypt the communication between them. This means the data transferred is private and secure.

Why TLS Is Important:

  • Security: TLS ensures that your data (like passwords, personal information, and credit card details) is encrypted so that only the intended recipient can read it.

  • Trust: Websites with HTTPS show a padlock symbol, which builds trust because users know their data is secure.

  • Privacy: Prevents third parties from reading or modifying the data being transferred between the client and server.

50
Subscribe to my newsletter

Read articles from Nitin Gumber directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Nitin Gumber
Nitin Gumber

Excited Full Stack Web Developer mastering the MERN Stack for dynamic web creations. Turning concepts into code-driven wonders.