HTML Under the Hood: 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 tag
Content 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 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:

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: