# HTML Under the Hood: How HTML Really Works Behind the Scenes **H**yper **T**ext **M**arkup **L**anguage ### πŸ“Œ **Hyper Text** This just means **text with links**. When you click on a link to go to another pagethat’s **hypertext**. > So HTML lets you connect pages together with <a> tags (links). ### πŸ“Œ **Markup** Markup means **tags** that tell the browser how to structure and display content. Example: ```html

This is a heading

This is a paragraph.

``` You’re not writing the content alone you’re **marking it up** to say what it is: a heading, a paragraph, a link, etc. ### πŸ“Œ **Language** HTML is a **computer language**, but not like Python or JavaScript. It doesn’t have logic or calculations just structure. Think of it like this: > HTML is the skeleton of a webpageit defines what’s on the page and in what order. ```jsx My Website

Hello!

This is my first webpage.

Go to Google ``` ## 🧠 **What Happens When a Browser Renders HTML?** Imagine a browser (like Chrome, Firefox, Safari) as a super-fast reader. When you open a web page: 1. **Browser gets HTML code** from a server. 2. **It reads the HTML line by line** (top to bottom). 3. **It builds a visual structure** called the **DOM** (Document Object Model). 4. **Then it draws what you see** on the screen text, images, buttons, etc. ## 🧠 WHAT IS THE DOM REALLY? The **DOM** is an in-memory **tree-like data structure** that the browser creates from HTML. It’s **not HTML**, but a **representation of it** that JavaScript and the browser can interact with. * Every **HTML element becomes a node** in the tree. * The structure of your HTML defines the **parent-child relationships** between those nodes. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1745428573011/3adcfc79-8ab8-481c-a73c-ef0c2148776e.png align="center") ### πŸ” What This Tree Tells Us * The root of every DOM is `Document`. * Inside the `` element, we have two main children: * `` with a `` that contains text. * `<body>` with three elements: * `<h1>`: heading text * `<p>`: a paragraph * `<a>`: a link with text and an attribute (`href`) Each **element node** (like `<h1>`) can have **text nodes** or **child elements** inside. ## 🏷️ **How Tags Work** HTML is made up of **tags**, like `<p>` or `<h1>`. Most tags come in **pairs**: ```html <p>This is a paragraph.</p> ``` * `<p>` = opening tag * `</p>` = closing tag * Content goes in between. There are also **self-closing tags**, like: ```html <img src="cat.jpg" alt="Cute cat"> ``` * `<img>` inserts an image. It doesn’t wrap anything, so it’s self-closing. ## **πŸ” STEP-BY-STEP: HOW BROWSERS BUILD THE DOM** ### βœ… 1. **HTML Download** When you enter a URL: * The browser sends an HTTP request to the server. * The server responds with an HTML file. * The browser starts reading it **before it's fully downloaded** (this is called **streaming parsing**). --- ### βœ… 2. **Tokenization** The browser breaks the raw HTML text into **tokens**: Example HTML: ```html <p>Hello <b>world</b></p> ``` Becomes tokens like: * Start tag `<p>` * Text node `Hello` * Start tag `<b>` * Text node `world` * End tag `</b>` * End tag `</p>` --- ### βœ… 3. **Lexing & Tree Construction** The tokens are converted into **nodes** and attached to the **DOM tree**: ```xml Document └── <html> └── <body> └── <p> β”œβ”€β”€ "Hello" └── <b> └── "world" ``` Each node has: * A **type** (element, text, comment, etc.) * **Attributes** * **Children** * A **reference to its parent** --- ### βœ… 4. **Dealing with Bad HTML (HTML5 parser)** Browsers are **forgiving**. Even if you write messy HTML, they try to fix it. For example: ```html <p>Hello <b>world ``` Will be interpreted and closed properly in the DOM as if you had written the full: ```html <p>Hello <b>world</b></p> ``` Browsers have **error recovery logic** based on the HTML5 spec. --- ### βœ… 5. **Script Execution May Pause DOM Building** When the parser encounters a `<script>` tag **without** `async` or `defer`, it: * **Pauses** DOM construction. * **Runs** the script (because it might modify the DOM). * **Resumes** parsing after the script runs. That’s why putting `<script>` at the bottom of the page or using `defer` is good for performance. --- ### βœ… 6. **Final DOM Tree Built** Once parsing is complete, the browser has a full **DOM Tree** in memory. Example simplified tree: ```xml Document └── html β”œβ”€β”€ head β”‚ └── title β†’ "My Page" └── body β”œβ”€β”€ h1 β†’ "Welcome" └── p β†’ "Hello World" ``` This is what JavaScript talks to when you do things like: ```xml document.querySelector("h1").textContent = "Changed!"; ``` You're not modifying raw HTML you’re modifying the **DOM structure** in memory. Thanks for reading πŸ™Œ ## 🀝 Let's Connect! I'm Aman, a freelance web developer. I love building clean, functional websites and apps. I'm open to **work**, **collaborations**, or just a good tech chat. πŸ“¬ **Reach out or follow me:** * [Twitter](https://twitter.com/huamanraj) * [GitHub](https://github.com/huamanraj) * [LinkedIn](https://linkedin.com/in/huamanraj) * [Email Me](mailto:amanraj@gmail.com)