# How a Browser Works: A Beginner-Friendly Guide to Browser Internals
What happens when you type a URL and press Enter is more interesting than “the browser opens a website.” A browser is a small operating system of its own, with many parts working together to turn text files (HTML, CSS, JS) into the page you see and interact with.
## What a browser really is
A browser (Chrome, Firefox, Edge, Safari) is a **program that reads web content and turns it into a visual, interactive page**.
Functions of browser:
* Talks to servers on the internet.
* Downloads HTML, CSS, JavaScript, images, fonts, etc.
* Understands these files.
* Builds an internal model of the page.
* Draws pixels on your screen and updates them when things change.
So it’s not just “showing a website.” It’s **fetching, understanding, and rendering**.
## Main parts of a browser
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769663035706/618dda8e-3c5d-4829-b667-0bdfe1ead09a.png align="center")
Here are the roles of each part roles:
* **User Interface (UI)** – what you see: address bar, back/forward buttons, tabs, bookmarks.
* **Browser Engine** – coordinator that connects the UI and the rendering engine.
* **Rendering Engine** – reads HTML/CSS and turns them into the page layout and visuals.
* **Networking** – handles HTTP/HTTPS requests and downloads.
* **JavaScript Engine** – runs JavaScript code (V8 in Chrome, SpiderMonkey in Firefox, etc.).
* **Storage** – cookies, localStorage, cache, etc.
How it all works together:
* UI talks to you.
* Networking talks to the internet.
* Rendering engine and JS engine talk to the page.
* Browser engine coordinates everyone.
## User Interface: what you see and touch
The UI is the part you interact with:
* **Address bar** – where you type `https://example.com`.
* **Tabs** – let you open multiple pages at once.
* **Back / Forward buttons** – move through your history.
* **Reload button** – asks the page to load again.
* **Bookmarks** – saved URLs.
These are not "the web page" itself. They are the **controls** around the web page. When you hit Enter in the address bar, the UI tells the browser engine: "Please load this URL in this tab."
## Browser Engine vs Rendering Engine
These names are easy to mix up, so keep them simple:
* **Browser Engine**: the **manager**. It receives instructions from the UI (load this URL) and tells the rendering engine what to do.
* **Rendering Engine**: the **builder and painter**. It takes HTML/CSS and turns them into what you see on the screen.
Some common rendering engines:
* Blink (Chrome, Edge, Opera)
* WebKit (Safari)
* Gecko (Firefox)
You don't need to know details. Just remember: **browser engine = coordinator**, **rendering engine = page builder**.
## Networking: how the browser fetches data
After you press Enter:
1. The browser resolves the domain to an IP address using DNS.
2. It opens a TCP (or TLS for HTTPS) connection to the server.
3. It sends an HTTP request, e.g. `GET /` for the main page.
4. The server responds with HTML.
The **networking** part of the browser handles:
* Making the connection.
* Sending requests.
* Receiving responses.
* Handling redirects, errors, timeouts.
The networking layer then gives the downloaded HTML to the **rendering engine**.
## The rendering pipeline: how your page comes to life
Now let's walk through the exact flow shown in the diagram, step by step.
### Step 1: HTML Parser receives HTML
The browser receives raw **HTML** text from the network. The **HTML Parser** starts reading it character by character, breaking it into meaningful pieces called tokens.
Example:
```xml
Hello
This is a page.
```
The parser identifies:
* Opening tags: ``, ``, `
`
* Closing tags: `
`, ``, ``
* Text content: "Hello", "This is a page."
### Step 2: Content Sink coordinates the construction
As the HTML parser processes tokens, they flow into something called the **Content Sink**. Think of the Content Sink as a **traffic controller** that manages both HTML and CSS data flowing into the page construction.
The Content Sink:
* Receives parsed HTML tokens from the HTML Parser.
* Receives parsed CSS rules from the CSS Parser (which we'll talk about next).
* Coordinates when and how the DOM and CSSOM get built.
This is where the two parallel streams (HTML and CSS) meet.
### Step 3: CSS Parser processes stylesheets
While HTML is being parsed, the browser also finds `` tags pointing to CSS files or `