How a browser renders a web page

Rendering is when the browser reads the HTML it received and paints it into the visible page shown on screen.

Part of: HTML and CSS Journey — Module 1

What it does: The html element is the root the browser renders everything else inside of. Before rendering, the browser sends a request like this to the server for the file. The browser reads the HTML and paints it as the page you see. Reading the markup and painting the page is exactly what rendering means. The body holds the content the browser paints for the user to see. The browser requests the files, then renders them after they arrive. There is nothing to render until the HTML has been received. The doctype declaration sets the rendering mode the browser uses for the page.

Common mistakes: The declaration is missing its exclamation mark; it must be <!DOCTYPE html> so the browser renders the page in standards mode. The opening html tag is missing its closing angle bracket; it should be <html> so the browser recognises the root element.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of How a browser renders a web page (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

What does a browser do with an HTML file it receives?

Renders it into a visible pageCompiles it into machine code

Matches

↓

The body tag is misspelled, so the browser renders no body region

Applying

Meanings

Term

rendering

Meaning

Rendering is when the browser reads the HTML it received and paints it into the visible page shown on screen.

Practice

<!DOCTYPE html>

Testing

Gaps

<></html>

Check Answer

Spots

1<DOCTYPE html>

2<html>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. What does a browser do with an HTML file it receives?

A. Renders it into a visible page ✓

B. Compiles it into machine code

The browser reads the HTML and paints it as the page you see.

2. Where does a browser usually get a web page's files from?

A. A web server ✓

B. The screen itself

The browser sends a request to a server and receives the files back.

3. True or false: the browser reads HTML and paints it on screen.

A. True ✓

B. False

Reading the markup and painting the page is exactly what rendering means.

4. Which is the visible result of rendering?

A. The raw HTML shown as plain code

B. A formatted page with headings and text ✓

Rendering turns the markup into a laid-out, styled page.

5. Does the content inside <body> appear in the rendered page?

A. Yes, it is the visible content ✓

B. No, it is always hidden

The body holds the content the browser paints for the user to see.

Match the Pairs

<!DOCTYPE html> → Tells the browser to render the document as modern HTML

<body>...</body> → Holds the visible content the browser paints on screen

The element that wraps the whole page the browser renders → <html></html>

The request a browser sends to fetch a page's files → GET /index.html

<boddy></boddy> → The body tag is misspelled, so the browser renders no body region

<h1>Hi</h2> → Opening and closing tag names do not match, so the heading will not render correctly

Key Term

rendering

Rendering is when the browser reads the HTML it received and paints it into the visible page shown on screen.

Fill in the Blanks

1. <html></html>

Hint: Type the root element name that wraps the whole page the browser renders.

2. <body></body>

Hint: Type the element that holds the visible content the browser paints.

3. <!DOCTYPE html>

Hint: Type the document type this declaration tells the browser to render.

4. <h1>Hello</h1>

Hint: Type the top-level heading tag the browser renders as large text.

5. <body> </body>

Hint: Type the element name in the closing tag that matches the opening body tag.

Spot the Error

Question 1

A <DOCTYPE html>

B <html>

C <body></body>

D </html>

Line A — The declaration is missing its exclamation mark; it must be <!DOCTYPE html> so the browser renders the page in standards mode.

Question 2

A <!DOCTYPE html>

B <html

C <body></body>

D </html>

Line B — The opening html tag is missing its closing angle bracket; it should be <html> so the browser recognises the root element.

Question 3

A <!DOCTYPE html>

B <html>

C <boddy>

D </body>

E </html>

Line C — The opening tag is misspelled as <boddy>; the browser only renders a body region from a correctly spelled <body>.

Question 4

A <!DOCTYPE html>

B <html>

C <body>

D <h1>Hi<h1>

E </body>

F </html>

Line D — The heading's closing tag is missing its slash; it should be </h1> so the browser knows where the heading ends.

Question 5

A <!DOCTYPE html>

B <html>

C <body>

D <p>Text</p>

E <html>

Line E — The final line should close the document with </html>, not open another <html>, or the browser sees an unfinished page.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?