How Web Browsers Work

The most-used program you never think about

You are reading this inside a web browser right now. It feels simple — type an address, a page appears — but behind that instant is one of the most sophisticated programs on your device. In a fraction of a second it finds a computer anywhere on Earth, asks it for files, and turns those files into the colours, text and buttons on your screen. This lesson opens the hood. It pairs naturally with How the Internet Works, which covers the network side in more depth.

Step 1: you type a URL

It starts with a URL (Uniform Resource Locator), like:

https://example.com/about

A URL has parts:

• https — the protocol, the rules for talking to the server (the s means encrypted).
• example.com — the domain name, the human-friendly address.
• /about — the path, which page on that server you want.

Step 2: DNS finds the server

Computers do not actually find each other by name; they use numeric IP addresses like 93.184.216.34. So the browser first asks the DNS (Domain Name System) — the internet's phone book — to translate example.com into its IP address.

"What is the IP address of example.com?"  ->  DNS  ->  "93.184.216.34"

Now the browser knows which machine to contact.

Step 3: the request and the response

The browser opens a connection to that IP address and sends an HTTP request, essentially a polite message: "Please send me the page at /about." The server reads it and sends back an HTTP response containing the file — usually an HTML document.

Browser  --- GET /about --->  Server
Browser  <--- 200 OK + HTML --  Server

The 200 OK is a status code meaning success. You have probably seen its unhappy cousin, 404 Not Found, when a page does not exist.

Step 4: parsing the HTML into the DOM

The HTML that arrives is just text. The browser reads it top to bottom and builds a tree of objects called the DOM (Document Object Model) — the same structure you manipulate in JavaScript and the DOM. Each tag becomes a node, and nesting becomes parent-and-child relationships:

html
└─ body
   ├─ h1   "About us"
   └─ p    "We make..."

While parsing, the browser notices links to other files — stylesheets and scripts — and fetches each of those with its own request, repeating steps 2 and 3.

Step 5: applying CSS and laying out

Next the browser reads the CSS and works out how every element should look: its colour, size, font, and exactly where it sits. This produces a layout — the precise rectangle each element occupies. Then comes painting: the browser fills in pixels, drawing backgrounds, text and borders onto the screen. The box-model rules from your CSS decide the spacing at this stage.

Step 6: running JavaScript

Finally, any JavaScript runs. Unlike HTML and CSS, which describe a static page, JavaScript can change the DOM while you watch — showing a menu when you click, loading more posts as you scroll, validating a form. Each change can trigger the browser to re-layout and re-paint the affected part. This is what turns a flat document into an interactive app.

Putting it together

The whole journey, end to end:

1. URL typed         https://example.com/about
2. DNS lookup        example.com  ->  93.184.216.34
3. HTTP request      GET /about
4. HTTP response     200 OK  +  HTML
5. Parse HTML        build the DOM tree
6. Fetch + apply CSS style and lay out every element
7. Paint             draw pixels on screen
8. Run JavaScript    make it interactive; update the DOM

All of that, for a typical page, happens in well under a second.

A worked example: watch it happen

You can see several of these steps with your own eyes. Open any web page, then open the browser's developer tools (press F12 or right-click and choose Inspect).

1. The DOM. The Elements tab shows the live DOM tree the browser built from the HTML — exactly the structure described in step 4. Expand nodes to see parents and children.
2. The requests. The Network tab lists every file the browser fetched: the HTML document first, then CSS, JavaScript, images and fonts, each with its status code (200, 404, and so on). Reload the page and watch them arrive.
3. Live changes. In the Console tab, type this and press Enter:

document.body.style.background = "lightyellow";

The page background changes instantly. You just used JavaScript to modify the DOM — step 6 in action, with no reload and no new request to the server.

Reading what you saw: the Elements tab proves the page is a tree of nodes, the Network tab proves a single page is really many files fetched over HTTP, and the Console command proves JavaScript can reach into the live page and change it on the spot.

Try it yourself

1. Trace a status code. In the Network tab, click the main document request and find its status. Then visit a deliberately wrong path on a site and watch a 404 appear.
2. Break the style. In the Elements tab, find an element, change one of its CSS values in the styles panel, and watch the page update live — the browser re-lays-out and re-paints just that part.
3. Inspect the order. Reload with the Network tab open and note that the HTML arrives first, then the CSS and JavaScript it references. That order is exactly steps 3 through 6.

Challenge: In the Console, use JavaScript to add a brand-new element to the live page: create an <h2>, set its text, and append it to the body. (Look up document.createElement and appendChild.) When your new heading appears, you have personally performed step 6 — modifying the DOM after load — which is the heart of how every interactive website works. For more, continue with JavaScript Events and Clicks.