HTML Under the Hood: How HTML Really Works Behind the Scenes
How HTML Really Works Behind the Scenes
Hyper Text Markup Language
📌 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:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
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.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello!</h1>
<p>This is my first webpage.</p>
<a href="https://google.com/">Go to Google</a>
</body>
</html>
🧠 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:
Browser gets HTML code from a server.
It reads the HTML line by line (top to bottom).
It builds a visual structure called the DOM (Document Object Model).
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.
🔍 What This Tree Tells Us
The root of every DOM is
Document.Inside the
<html>element, we have two main children:<head>with a<title>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:
<p>This is a paragraph.</p>
<p>= opening tag</p>= closing tagContent goes in between.
There are also self-closing tags, like:
<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:
<p>Hello <b>world</b></p>
Becomes tokens like:
Start tag
<p>Text node
HelloStart tag
<b>Text node
worldEnd tag
</b>End tag
</p>
✅ 3. Lexing & Tree Construction
The tokens are converted into nodes and attached to the DOM tree:
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:
<p>Hello
<b>world
Will be interpreted and closed properly in the DOM as if you had written the full:
<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:
Document
└── html
├── head
│ └── title → "My Page"
└── body
├── h1 → "Welcome"
└── p → "Hello World"
This is what JavaScript talks to when you do things like:
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:
