Suggest an edit

Improve this article

Refine the answer for “What does the browser do when loading an HTML file?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

When the browser loads an HTML file, it performs **several clear steps**, turning the code into the finished visual page we see on screen.
Here is how it happens:

---

### 1. **Fetching and reading the file**

The browser gets the HTML document:

- either from a server at an address (for example, `https://example.com`),
- or from your computer (if you opened an `.html` file manually).

After that, it starts **reading the file from top to bottom**, **line by line**, like a book.

---

### 2. **Analyzing the structure (parsing HTML)**

When the browser sees HTML tags (`<html>`, `<head>`, `<body>` and so on),
it **builds an internal model of the document** called the **DOM tree (Document Object Model)**.

Example:

```html
<body>
  <h1>Hello!</h1>
  <p>This is my site.</p>
</body>
```

The browser turns this into a structure:

```javascript
body
 ├── h1
 └── p
```

The DOM is what JavaScript then works with.

---

### 3. **Loading external resources**

While the HTML is being read, the browser sees links to other files:

- stylesheets (`<link rel="stylesheet" href="style.css">`),
- scripts (`<script src="script.js"></script>`),
- images (`<img src="photo.jpg">`).

It **sends additional requests** to the server to load them.

---

### 4. **Applying CSS (building the render)**

Once the styles are loaded, the browser builds the **CSSOM (CSS Object Model)**: a tree of all the styling rules.
It then merges it with the DOM, creating the **Render Tree**: a model in which every element knows:

- its color,
- its size,
- its position.

At this stage the browser already "understands" *how* the page should look.

---

### 5. **Rendering and displaying**

Next, the browser:

1. **Calculates the geometry** of elements (the layout stage).
2. **Draws** pixels on the screen (the paint stage).
3. If something changes (for example, an animation or a user action), it **repaints** the necessary areas.

---

### 6. **Running JavaScript**

Once the HTML structure is loaded, the browser runs **scripts**:

- they can change the DOM (add, remove, hide elements),
- react to user actions,
- update data without reloading the page.

---

### Summary:

| Stage | What the browser does |
|---|---|
| 1. Loading | Fetches the HTML file |
| 2. Parsing | Converts HTML into the DOM |
| 3. Loading resources | Loads CSS, JS, images |
| 4. Applying styles | Builds the visual representation |
| 5. Rendering | Displays the page |
| 6. JavaScript | Adds interactivity |

---

**In simple terms:**
The browser **reads the code**, **builds a model**, **styles it**, and **draws it on screen**.
Then, with JavaScript, the page starts to **live and react**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts435 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.