HTMLmarkup~10 mins

Head and body sections in HTML - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Head and body sections

Read <html>

→Create HTML root node

↓

Read <head>

→Create HEAD node as child

↓

Read <title>

→Create TITLE node as child

↓

Add text to TITLE

↓

Close TITLE

↓

Close HEAD

↓

Read <body>

→Create BODY node as child

↓

Read <h1>

→Create H1 node as child

↓

Add text to H1

↓

Close H1

↓

Close BODY

↓

Close HTML

The browser reads the HTML file from top to bottom, building a tree structure. It creates the head section first, which holds metadata and resources, then the body section, which holds visible content.

Render Steps - 3 Steps

Code Added:<head> section with <title>

Before

[Browser window with no title]

[Blank page]

→

After

[Browser window tab shows: "My Page"]

[Blank page]

The <head> section with the <title> sets the text shown on the browser tab but does not affect page content.

🔧 Browser Action:Parses head elements, sets document title, no visible page content change

Code Sample

This code creates a simple webpage with a title shown in the browser tab and a heading visible on the page.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Welcome!</h1>
</body>
</html>

Render Quiz - 3 Questions

Test your understanding

After applying step 1, what do you see in the browser?

AThe page shows a large heading "Welcome!"

BThe browser tab shows "My Page", but the page is blank

CThe page shows "My Page" as text

DThe page is completely blank and the tab is empty

Common Confusions - 2 Topics

Why doesn't the text inside <title> show on the webpage?

The <title> is inside the <head> section, which is for metadata only. It sets the browser tab text, not page content (see render_step 1).

💡 Content inside <head> is not visible on the page.

Can I put visible content inside <head>?

No, the browser ignores visible content inside <head>. Only <body> content shows on the page (see render_step 2).

💡 Put all visible elements inside <body>.

Property Reference

Section	Purpose	Content Type	Visible on Page
<head>	Metadata and resources	Title, meta tags, links, scripts	No
<body>	Visible page content	Text, images, buttons, etc.	Yes

Concept Snapshot

<head> holds metadata like <title> and <meta>, not visible on page <body> holds visible content like headings and paragraphs <title> sets browser tab text <meta charset> sets text encoding Visible content must be inside <body>