HTMLmarkup~10 mins

First HTML page - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - First HTML page

[Read <!DOCTYPE html>] -> [Create Document] -> [Read <html lang="en">] -> [Create HTML element] -> [Read <head>] -> [Create HEAD element] -> [Read <meta charset="UTF-8">] -> [Add meta to HEAD] -> [Read <title>] -> [Add title text] -> [Close HEAD] -> [Read <body>] -> [Create BODY element] -> [Read <h1>] -> [Create H1 element with text] -> [Close BODY] -> [Close HTML]

The browser reads the HTML line by line, building a tree of elements starting from the document type, then the html root, head with metadata, and finally the body with visible content.

Render Steps - 5 Steps

Code Added:<!DOCTYPE html>

Before

[Empty browser window]

→

After

[Empty browser window]

The browser recognizes the document type to know it is HTML5, but no visible change happens yet.

🔧 Browser Action:Sets document mode to HTML5

Code Sample

A simple web page showing a large heading that says 'Hello, world!' in the browser.

HTML

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

Render Quiz - 3 Questions

Test your understanding

After step 5, what do you see in the browser window?

AAn empty white page

BLarge bold text saying 'Hello, world!'

CThe page title displayed as text

DA blinking cursor

Common Confusions - 2 Topics

Why don't I see anything when I only write the <head> section?

The <head> contains metadata like title and charset but no visible content, so the page looks empty until you add elements inside <body>.

💡 Only elements inside <body> show on the page.

Why is my text not styled or centered automatically?

Browsers apply default styles like large bold for <h1>, but no centering. You must add CSS to change alignment or colors.

💡 Default styles are simple; add CSS for custom looks.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<!DOCTYPE html>	N/A	Declares HTML version	No visual output
<html>	block	Root element of the page	Contains all content
<head>	none	Metadata container	Not visible
<body>	block	Visible content container	Holds page content
<h1>	block	Top level heading	Large bold text, block-level

Concept Snapshot

The first HTML page starts with <!DOCTYPE html> to set HTML5 mode. <html> is the root element with lang attribute. <head> holds metadata, not visible. <body> contains visible content. <h1> shows large bold heading text by default.