thoggo

Building the future, one line of code at a time

Home Blog About
How the Web Works
11 min read

How the Web Works

How the Web Works: A Beginner’s Guide to HTTP, Browsers, and Servers

Ever wondered what happens when you type a URL into your browser and hit Enter? In just milliseconds, your browser displays a complete webpage from a server thousands of miles away. This seemingly magical process involves a complex dance of technologies working together seamlessly.

In this comprehensive guide, you’ll learn:

  • What happens when you visit a website
  • How browsers and servers communicate
  • The role of HTTP and HTTPS protocols
  • Domain names and DNS resolution
  • Web servers and hosting
  • Client-server architecture
  • Internet infrastructure basics
  • Common web protocols and standards

The Big Picture: What is the Web?

The World Wide Web (WWW) is a system of interconnected documents and resources linked by hyperlinks and URLs. It’s built on top of the Internet, which is the global network infrastructure that connects billions of devices worldwide.

Key Components:

🌐 Clients - Devices that request information (your browser) 🖥️ Servers - Computers that serve information 🔗 HTTP/HTTPS - Protocols for communication 📍 URLs - Addresses for web resources 🌍 DNS - System that translates domain names to IP addresses 🔌 Internet - The underlying network infrastructure

What Happens When You Visit a Website?

Let’s trace the complete journey from typing https://example.com to seeing the webpage:

Step 1: You Type a URL
https://example.com/about

This URL contains several parts:

  • https:// - Protocol (secure HTTP)
  • example.com - Domain name
  • /about - Path to specific resource
Step 2: DNS Lookup

Your browser needs to find the server’s IP address:

Browser → DNS Resolver → Root Server → TLD Server → Authoritative Server

What happens:

  1. Browser checks its cache for example.com
  2. If not found, asks your ISP’s DNS resolver
  3. DNS resolver queries the root name servers
  4. Root servers direct to .com top-level domain servers
  5. TLD servers provide the authoritative name server
  6. Authoritative server returns the IP address (e.g., 192.0.2.1)
Step 3: TCP Connection

Your browser establishes a connection with the server:

Browser                    Server
   |                          |
   |-----> SYN packet ------->|
   |<--- SYN-ACK packet ------|
   |-----> ACK packet ------->|
   |                          |
   |    Connection established |
Step 4: HTTPS Handshake (if using HTTPS)

For secure connections, an additional handshake occurs:

1. Client Hello (supported encryption methods)
2. Server Hello (chosen encryption method + certificate)
3. Certificate verification
4. Key exchange
5. Encrypted connection established
Step 5: HTTP Request

Your browser sends an HTTP request:

GET /about HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
Accept: text/html,application/xhtml+xml,application/xml
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Step 6: Server Processing

The web server:

  1. Receives and parses the request
  2. Determines what resource to serve
  3. May query databases or run application code
  4. Generates the response
Step 7: HTTP Response

The server sends back an HTTP response:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Cache-Control: public, max-age=3600
Set-Cookie: session_id=abc123; HttpOnly; Secure

<!DOCTYPE html>
<html>
<head>
    <title>About Us</title>
</head>
<body>
    <h1>Welcome to our website!</h1>
    <!-- More HTML content -->
</body>
</html>
Step 8: Browser Rendering

The browser:

  1. Parses HTML - Creates Document Object Model (DOM)
  2. Loads CSS - Styles the elements
  3. Executes JavaScript - Adds interactivity
  4. Renders the page - Displays the final result

Understanding HTTP and HTTPS

HTTP (HyperText Transfer Protocol)

HTTP is the foundation of data communication on the Web. It’s a stateless protocol, meaning each request is independent.

HTTP Methods
GET     - Retrieve data
POST    - Send data to server
PUT     - Update/replace data
PATCH   - Partial update
DELETE  - Remove data
HEAD    - Get headers only
OPTIONS - Check allowed methods
HTTP Status Codes
1xx - Informational
100 Continue
101 Switching Protocols

2xx - Success
200 OK
201 Created
204 No Content

3xx - Redirection
301 Moved Permanently
302 Found (Temporary Redirect)
304 Not Modified

4xx - Client Error
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
429 Too Many Requests

5xx - Server Error
500 Internal Server Error
502 Bad Gateway
503 Service Unavailable
HTTP Headers

Request Headers:

Host: example.com
User-Agent: Mozilla/5.0...
Accept: text/html,application/xhtml+xml
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
Cookie: session_id=abc123

Response Headers:

Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Cache-Control: public, max-age=3600
Set-Cookie: user_pref=dark_mode; HttpOnly
Location: https://example.com/new-url
HTTPS (HTTP Secure)

HTTPS adds encryption using TLS (Transport Layer Security):

🔒 Encryption - Data is scrambled during transmission 🛡️ Authentication - Verifies server identity ✅ Integrity - Ensures data isn’t tampered with

HTTP  →  Port 80  (Unencrypted)
HTTPS →  Port 443 (Encrypted with TLS)

Domain Names and DNS

Anatomy of a Domain Name
subdomain.domain.tld
    |       |     |
    |       |     └── Top-Level Domain (.com, .org, .net)
    |       └── Second-Level Domain (your brand)
    └── Subdomain (www, blog, api)

Examples:

  • www.example.com
  • blog.example.com
  • api.example.com
DNS Record Types
A Record     - Maps domain to IPv4 address
AAAA Record  - Maps domain to IPv6 address
CNAME Record - Maps domain to another domain
MX Record    - Mail server information
TXT Record   - Text information (SPF, DKIM, etc.)
NS Record    - Name server information

Example DNS Records:

example.com.        A       192.0.2.1
www.example.com.    CNAME   example.com.
blog.example.com.   A       192.0.2.2
example.com.        MX 10   mail.example.com.
DNS Lookup Process
1. Browser cache
2. Operating system cache
3. Router cache
4. ISP DNS resolver
5. Root name servers
6. TLD name servers
7. Authoritative name servers

Web Servers and Hosting

Types of Web Servers
1. Apache HTTP Server
# .htaccess example
RewriteEngine On
RewriteRule ^api/(.*)$ /api.php?endpoint=$1 [QSA,L]

<Directory "/var/www/html">
    AllowOverride All
    Require all granted
</Directory>
2. Nginx
server {
    listen 80;
    server_name example.com;
    
    location / {
        root /var/www/html;
        index index.html index.php;
    }
    
    location /api/ {
        proxy_pass http://backend:3000;
        proxy_set_header Host $host;
    }
}
3. Node.js (Express)
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('<h1>Hello World!</h1>');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});
4. Python (Flask/Django)
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return '<h1>Hello, World!</h1>'

if __name__ == '__main__':
    app.run(debug=True)
Hosting Types
Shared Hosting
  • Multiple websites on one server
  • Cheapest option
  • Limited resources and control
VPS (Virtual Private Server)
  • Dedicated portion of a server
  • More control and resources
  • Better performance
Dedicated Server
  • Entire server for your use
  • Maximum control and performance
  • Most expensive
Cloud Hosting
  • Distributed across multiple servers
  • Scalable and reliable
  • Pay-as-you-use pricing
CDN (Content Delivery Network)
User in New York    → CDN Edge Server (New York)
User in London      → CDN Edge Server (London)
User in Tokyo       → CDN Edge Server (Tokyo)
                        ↑
                   Origin Server

Client-Server Architecture

Traditional Client-Server Model
Client (Browser)     ←→     Server
    |                        |
    |── HTML Request ──────→ |
    |                        |── Process Request
    |                        |── Query Database
    |                        |── Generate Response
    |← HTML Response ────────|
Modern Architectures
Single Page Applications (SPA)
Browser ←→ API Server ←→ Database
   |          |
   |          └── JSON Data
   └── JavaScript Framework (React, Vue, Angular)
Microservices
Browser → API Gateway → Auth Service
                     → User Service
                     → Payment Service
                     → Notification Service
Serverless/JAMstack
Browser → CDN (Static Files)
       → API Functions (AWS Lambda, Vercel)
       → Database (Headless CMS)

Internet Infrastructure

Internet Service Providers (ISPs)
Your Device → Home Router → ISP → Internet Backbone → Destination Server

ISP Tiers:

  • Tier 1 - Global backbone providers
  • Tier 2 - Regional providers
  • Tier 3 - Local/consumer ISPs
Internet Backbone

The Internet backbone consists of:

  • Fiber optic cables (including undersea cables)
  • Internet Exchange Points (IXPs)
  • Autonomous Systems (AS)
  • Border Gateway Protocol (BGP)
IP Addresses and Routing
IPv4 Addresses
192.168.1.1 (Private)
8.8.8.8     (Google DNS - Public)
IPv6 Addresses
2001:4860:4860::8888 (Google DNS)
fe80::1%lo0          (Link-local)
Routing Example
traceroute example.com

1  192.168.1.1      1.2ms    (Your router)
2  10.0.0.1         5.4ms    (ISP gateway)
3  203.0.113.1      12.3ms   (ISP backbone)
4  198.51.100.1     23.1ms   (Internet backbone)
5  192.0.2.1        45.6ms   (Destination server)

Web Protocols and Standards

HTTP Evolution
HTTP/1.1 (1997)
  • Persistent connections
  • Chunked transfer encoding
  • Host header requirement
HTTP/2 (2015)
  • Binary protocol
  • Multiplexing
  • Server push
  • Header compression
HTTP/3 (2022)
  • Built on QUIC (UDP)
  • Faster connection establishment
  • Better mobile performance
WebSocket Protocol

Real-time bidirectional communication:

// Client-side
const socket = new WebSocket('wss://example.com/socket');

socket.onopen = function(event) {
    console.log('Connected to WebSocket');
    socket.send('Hello Server!');
};

socket.onmessage = function(event) {
    console.log('Message from server:', event.data);
};
REST API Principles
GET    /api/users           - Get all users
GET    /api/users/123       - Get specific user
POST   /api/users           - Create new user
PUT    /api/users/123       - Update user
DELETE /api/users/123       - Delete user
GraphQL
query {
  user(id: "123") {
    name
    email
    posts {
      title
      content
    }
  }
}

Browser Deep Dive

How Browsers Work
Rendering Pipeline
  1. HTML Parsing → DOM Tree
  2. CSS Parsing → CSSOM Tree
  3. JavaScript Execution
  4. Layout (Reflow)
  5. Paint
  6. Composite
HTML → DOM Tree ──┐
                  ├→ Render Tree → Layout → Paint → Display
CSS → CSSOM Tree ─┘
JavaScript Engine
// V8 Engine (Chrome/Node.js) Process:
Source Code → Parser → AST → Interpreter → Bytecode
                            ↓
                       Compiler → Optimized Machine Code
Browser Components
  • User Interface - Address bar, bookmarks, etc.
  • Browser Engine - Manages rendering engine
  • Rendering Engine - Displays requested content
  • Networking - HTTP requests and responses
  • JavaScript Interpreter - Executes JavaScript
  • UI Backend - Drawing basic widgets
  • Data Storage - Cookies, localStorage, etc.
Browser Developer Tools
Network Tab
Request URL: https://example.com/api/data
Request Method: GET
Status Code: 200 OK
Response Time: 45ms
Response Size: 1.2KB
Console
console.log('Debug message');
console.error('Error occurred');
console.table(data);
console.time('performance');
// ... code to measure
console.timeEnd('performance');
Elements Tab
  • Inspect HTML structure
  • Modify CSS in real-time
  • Debug layout issues

Security Considerations

Common Security Headers
Strict-Transport-Security: max-age=31536000; includeSubDomains
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
HTTPS Certificate Chain
Root CA Certificate
    ↓
Intermediate CA Certificate
    ↓
Server Certificate (example.com)
Common Web Vulnerabilities
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • SQL Injection
  • Man-in-the-Middle Attacks
  • DDoS (Distributed Denial of Service)

Performance Optimization

Page Load Optimization
Critical Rendering Path
<!DOCTYPE html>
<html>
<head>
  <!-- Critical CSS inlined -->
  <style>
    body { font-family: sans-serif; }
    .header { background: blue; color: white; }
  </style>
  
  <!-- Non-critical CSS loaded asynchronously -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>
<body>
  <!-- Content -->
  
  <!-- Scripts at bottom -->
  <script src="app.js"></script>
</body>
</html>
Resource Optimization
  • Minification - Remove unnecessary characters
  • Compression - Gzip/Brotli compression
  • Caching - Browser and CDN caching
  • Image Optimization - WebP format, lazy loading
HTTP Caching
# Server Response Headers
Cache-Control: public, max-age=3600
ETag: "abc123"
Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT

# Subsequent Request
If-None-Match: "abc123"
If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT

# Server Response (if not modified)
HTTP/1.1 304 Not Modified

Practical Examples

Simple HTTP Server (Node.js)
const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  // Parse URL
  const url = req.url === '/' ? '/index.html' : req.url;
  const filePath = path.join(__dirname, 'public', url);
  
  // Get file extension
  const ext = path.extname(filePath);
  const mimeTypes = {
    '.html': 'text/html',
    '.css': 'text/css',
    '.js': 'text/javascript',
    '.png': 'image/png',
    '.jpg': 'image/jpeg'
  };
  
  // Read and serve file
  fs.readFile(filePath, (err, data) => {
    if (err) {
      res.writeHead(404);
      res.end('File not found');
    } else {
      res.writeHead(200, {
        'Content-Type': mimeTypes[ext] || 'text/plain'
      });
      res.end(data);
    }
  });
});

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});
AJAX Request Example
// Modern Fetch API
async function fetchData() {
  try {
    const response = await fetch('/api/users', {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

// XMLHttpRequest (older method)
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

Debugging Web Applications

Network Debugging
# Check DNS resolution
nslookup example.com
dig example.com

# Test HTTP requests
curl -I https://example.com
curl -v https://example.com/api/data

# Check SSL certificate
openssl s_client -connect example.com:443 -servername example.com

# Trace network route
traceroute example.com
Browser Debugging
// Performance measurement
performance.mark('start');
// ... code to measure
performance.mark('end');
performance.measure('operation', 'start', 'end');
console.log(performance.getEntriesByType('measure'));

// Network information
console.log(navigator.connection);
console.log(navigator.onLine);

// Resource timing
window.addEventListener('load', function() {
  const resources = performance.getEntriesByType('resource');
  resources.forEach(resource => {
    console.log(`${resource.name}: ${resource.duration}ms`);
  });
});

Future of the Web

Emerging Technologies
Web Assembly (WASM)
// C code compiled to WebAssembly
int add(int a, int b) {
    return a + b;
}
// Loading WebAssembly in JavaScript
WebAssembly.instantiateStreaming(fetch('math.wasm'))
  .then(results => {
    const add = results.instance.exports.add;
    console.log(add(5, 3)); // 8
  });
Progressive Web Apps (PWA)
// Service Worker for offline functionality
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});
Web Components
class CustomButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <style>
        button { padding: 10px; background: blue; color: white; }
      </style>
      <button><slot></slot></button>
    `;
  }
}
customElements.define('custom-button', CustomButton);
HTTP/3 and QUIC

Benefits over HTTP/2:

  • Faster connection establishment
  • Better mobile performance
  • Head-of-line blocking elimination
  • Connection migration

Best Practices for Web Development

Performance Best Practices
<!-- Optimize loading order -->
<head>
  <!-- DNS prefetch for external resources -->
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  
  <!-- Preload critical resources -->
  <link rel="preload" href="critical.css" as="style">
  <link rel="preload" href="hero-image.jpg" as="image">
  
  <!-- Critical CSS inline -->
  <style>/* Critical styles */</style>
</head>
Security Best Practices
// Input validation
function sanitizeInput(input) {
  return input.replace(/[<>]/g, '');
}

// CSRF protection
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
fetch('/api/data', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': csrfToken,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});
SEO Best Practices
<!-- Semantic HTML structure -->
<article>
  <header>
    <h1>Article Title</h1>
    <time datetime="2025-06-22">June 22, 2025</time>
  </header>
  
  <main>
    <p>Article content...</p>
  </main>
  
  <footer>
    <address>Author information</address>
  </footer>
</article>

<!-- Meta tags for social sharing -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="image.jpg">
<meta name="twitter:card" content="summary_large_image">

Conclusion

Understanding how the web works is crucial for any web developer. From the moment you type a URL to seeing the rendered page, dozens of technologies work together seamlessly.

Key Takeaways:

🌐 The web is a distributed system - Built on protocols, standards, and infrastructure 🔄 HTTP is stateless - Each request is independent 🔒 Security is paramount - Always use HTTPS and follow security best practices ⚡ Performance matters - Optimize for speed and user experience 📱 Mobile-first thinking - Design for all devices and connections 🔧 Standards evolve - Stay updated with new protocols and technologies

Continue Learning:
  • Practice building HTTP servers and clients
  • Experiment with browser developer tools
  • Learn about web security and performance optimization
  • Explore modern web technologies like PWAs and WebAssembly
  • Understand backend technologies and databases

The web is constantly evolving, but these fundamental concepts will serve as your foundation for understanding any new technologies that emerge.

Remember: Every website you visit, every API call you make, and every interactive web application you build relies on these core principles. Master them, and you’ll have a solid foundation for your web development journey!

Ab

Abdulrehman

Frontend developer passionate about modern web technologies and AI integration.

BlogBot

Online
How the Web Works

How the Web Works

Learn how the internet works from the ground up. Understand HTTP, browsers, servers, DNS, and the complete journey from typing a URL to seeing a webpage.