0
0
HTMLmarkup~10 mins

How browsers read HTML - Browser Rendering Walkthrough

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Render Flow - How browsers read HTML
Read <html>
→Create HTML node
↓
Read <head>
→Create HEAD node as child
↓
Read <title>
→Create TITLE node as child
↓
Add text inside TITLE
↓
Close TITLE
↓
Close HEAD
↓
Read <body>
→Create BODY node as child
↓
Read <h1>
→Create H1 node as child
↓
Add text inside H1
↓
Close H1
↓
Read <p>
→Create P node as child
↓
Add text inside P
↓
Close P
↓
Close BODY
↓
Close HTML
The browser reads HTML from top to bottom, creating a tree of nodes called the DOM. Each tag creates a node, and text inside tags becomes text nodes. This tree guides how the page is shown.
Render Steps - 6 Steps
Code Added:Read <html> and create HTML node
Before
→
After
[HTML]
The browser starts by reading the <html> tag and creates the root HTML node.
🔧 Browser Action:Create root DOM node
Code Sample
This HTML creates a simple page with a title, a big heading, and a paragraph.
HTML
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Hello world!</p>
  </body>
</html>
Render Quiz - 3 Questions
Test your understanding
After step 3, what nodes exist inside the <head> element?
AAn empty <head> with no children
BOnly text nodes, no elements
CA <title> node with text inside
DA <body> node inside <head>
Common Confusions - 2 Topics
Why don't I see the <head> content on the page?
The <head> contains metadata like <title> and scripts, which do not display on the page itself. Only <body> content shows visually.
💡 Remember: <head> is for info, <body> is for what you see.
Why does text inside tags become nodes in the DOM?
Text inside tags is stored as text nodes so the browser knows what to show inside each element.
💡 Tags create boxes, text fills those boxes.
Property Reference
HTML ElementNode TypeRole in DOMVisual Effect
<html>Root ElementRoot of the DOM treeContains all page content
<head>Container ElementHolds metadata and scriptsNot visible on page
<title>Text ElementSets page title in browser tabShown in browser tab, not page
<body>Container ElementHolds visible page contentVisible content area
<h1>Heading ElementMain headingLarge bold text
<p>Paragraph ElementText blockNormal paragraph text
Concept Snapshot
Browsers read HTML top to bottom, building a DOM tree.
Each tag creates a node; text inside tags becomes text nodes.
<html> is the root node, <head> holds metadata, <body> holds visible content.
The DOM tree guides how the page is displayed in the browser.