Suggest an editImprove this articleRefine the answer for “What happens when the browser parses HTML?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**HTML parsing** is the process by which the browser reads HTML code and turns it into a machine-readable data structure: the **DOM tree (Document Object Model)**. **Key point:** while parsing, the browser reads the code, breaks it down by meaning, builds a model of the page (the DOM), and prepares everything needed to draw the page on screen.Shown above the full answer for quick recall.Answer (EN)Image**HTML parsing** is the process by which the browser **reads HTML code and turns it into a data structure** that a machine understands: a **DOM tree (Document Object Model)**. In simpler terms, the browser **translates HTML text into a visual structure** that it, and JavaScript, can then work with. --- ### Step by step: what the browser does when parsing HTML #### 1. **Loading the file** The browser receives the HTML document (from a server or locally) and starts reading it **line by line, top to bottom**. It does not wait for the whole file to load: parsing and loading happen **in parallel**. --- #### 2. **Lexical analysis (tokenization)** HTML is just text, and the browser needs to figure out where the **tags** are and where the **content** is. It splits the text into **tokens**: small meaningful units. For example, the code: ```html <p>Hello, world!</p> ``` breaks down into tokens: ```javascript Opening tag: <p> Text: "Hello, world!" Closing tag: </p> ``` --- #### 3. **Syntax analysis** After tokenization, the browser checks the structure of the document: nesting, whether tags are closed correctly, compliance with standards. If it finds an error (for example, a missing `</div>`), it **tries to guess** what the developer meant. HTML is a "forgiving" language, so the page almost always renders even if the code is not perfect. --- #### 4. **Building the DOM tree** From the resulting tokens, the browser creates the **DOM (Document Object Model)**: an internal tree of elements. Each tag becomes a **node**, and nested elements form a **hierarchy**. Example: ```html <body> <h1>Heading</h1> <p>Text</p> </body> ``` Turns into a tree: ```javascript body ├── h1 │ └── "Heading" └── p └── "Text" ``` --- #### 5. **Detecting external resources** When the browser encounters tags like: ```html <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <img src="photo.jpg"> ``` it sends **additional requests** to the server to load the CSS, scripts and images. Some of them (especially `<script>`) can **pause parsing** until they finish executing. --- #### 6. **Passing the DOM to the rendering stage** Once the DOM is ready (or partially ready), the browser passes it on: to the **rendering** stage, where CSS is applied, element positions are calculated, and the page is drawn. --- ### Summary: | Stage | What the browser does | |---|---| | 1. Loading | Fetches the HTML file | | 2. Tokenization | Splits text into tags and content | | 3. Syntax analysis | Checks structure and nesting | | 4. Building the DOM | Creates the tree of elements | | 5. Loading resources | Loads CSS, JS, images | | 6. Rendering | Passes the result to the screen | --- **In simple terms:** When parsing HTML, the browser **reads the code, breaks it down by meaning, builds a model of the page (the DOM)** and prepares everything needed to **draw the page on screen**.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.