What does the browser do when loading an HTML file?
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
.htmlfile 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:
<body>
<h1>Hello!</h1>
<p>This is my site.</p>
</body>The browser turns this into a structure:
body
├── h1
└── pThe 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:
- Calculates the geometry of elements (the layout stage).
- Draws pixels on the screen (the paint stage).
- 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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.