How browsers read HTML - Browser Rendering Walkthrough

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

After step 3, what nodes exist inside the <head> element?

A An empty <head> with no children

B Only text nodes, no elements

C A <title> node with text inside

D A <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 Element	Node Type	Role in DOM	Visual Effect
<html>	Root Element	Root of the DOM tree	Contains all page content
<head>	Container Element	Holds metadata and scripts	Not visible on page
<title>	Text Element	Sets page title in browser tab	Shown in browser tab, not page
<body>	Container Element	Holds visible page content	Visible content area
<h1>	Heading Element	Main heading	Large bold text
<p>	Paragraph Element	Text block	Normal 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.

Practice

1. How does a web browser read an HTML file?

easy

A. From top to bottom, line by line

B. From bottom to top, line by line

C. Randomly, skipping some lines

D. Only the first 10 lines

Solution

1. Step 1: Understand browser reading order

   Browsers read HTML code starting at the top and move down line by line to understand the structure.

2. Step 2: Confirm reading method

   This top-to-bottom reading ensures the page builds in the correct order for display.

3. Final Answer:

   From top to bottom, line by line -> Option A

4. Quick Check:

   Browser reads HTML top to bottom [OK]

Hint: Browsers read HTML from top to bottom [OK]

Common Mistakes:

• Thinking browsers read from bottom to top
• Assuming browsers skip lines
• Believing browsers read only part of the file

2. Which of the following is the correct way to start an HTML document?

easy

A. <html><body><head></head></body></html>

B. <head><html><body></body></head></html>

C. <body><html><head></head></body>

D. <html><head><title>Page</title></head><body></body></html>

Solution

1. Step 1: Check HTML structure order

   The correct order is <html> as root, then <head> for metadata, then <body> for content.

2. Step 2: Validate <html><head><title>Page</title></head><body></body></html> structure

   <html><head><title>Page</title></head><body></body></html> correctly places <head> inside <html> and <body> after <head>.

3. Final Answer:

   <html><head><title>Page</title></head><body></body></html> -> Option D

4. Quick Check:

   HTML starts with <html> then <head> [OK]

Hint: HTML starts with <html>, then <head>, then <body> [OK]

Common Mistakes:

• Placing <head> after <body>
• Starting with <body> tag
• Mixing tag order

3. What will a browser display when given this HTML snippet?

<html>
  <body>
    <h1>Hello</h1>
    <p>Welcome to the site.</p>
  </body>
</html>

medium

A. Only 'Hello' as plain text

B. Hello as a heading and 'Welcome to the site.' as a paragraph

C. An error message

D. Nothing, blank page

Solution

1. Step 1: Identify tags and their meaning

   <h1> creates a large heading, <p> creates a paragraph.

2. Step 2: Understand browser rendering

   The browser shows 'Hello' big as heading and 'Welcome to the site.' as normal paragraph text.

3. Final Answer:

   Hello as a heading and 'Welcome to the site.' as a paragraph -> Option B

4. Quick Check:

   <h1> = heading, <p> = paragraph [OK]

Hint: Headings show big text, paragraphs show normal text [OK]

Common Mistakes:

• Thinking <h1> shows plain text only
• Expecting an error from valid tags
• Assuming blank page without content

4. Find the error in this HTML snippet:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h2>Welcome</h3>
  </body>
</html>

medium

A. Missing <body> tag

B. Title tag is not closed

C. The closing tag for <h2> is incorrect

D. No <html> tag

Solution

1. Step 1: Check tag pairs

   The opening tag is <h2> but the closing tag is </h3>, which is wrong.

2. Step 2: Confirm correct closing tag

   The closing tag should be </h2> to match the opening tag.

3. Final Answer:

   The closing tag for <h2> is incorrect -> Option C

4. Quick Check:

   Opening and closing tags must match [OK]

Hint: Opening and closing tags must match exactly [OK]

Common Mistakes:

• Mixing different heading tags
• Ignoring tag mismatch errors
• Assuming missing tags when present

5. You want to ensure your webpage content appears correctly on all devices. Which HTML element helps browsers understand how to scale the page?

hard

A. <meta name="viewport" content="width=device-width, initial-scale=1">

B. <link rel="stylesheet" href="style.css">

C. <script src="app.js"></script>

D. <title>My Page</title>

Solution

1. Step 1: Identify purpose of viewport meta tag

   The <meta name="viewport"> tag tells browsers how to scale and size the page on different devices.

2. Step 2: Confirm correct usage

   Setting content to "width=device-width, initial-scale=1" ensures proper scaling on phones, tablets, and desktops.

3. Final Answer:

   <meta name="viewport" content="width=device-width, initial-scale=1"> -> Option A

4. Quick Check:

   Viewport meta tag controls page scaling [OK]

Hint: Use viewport meta tag for responsive scaling [OK]

Common Mistakes:

• Confusing stylesheet link with viewport
• Thinking script tags control scaling
• Ignoring viewport causes poor mobile display