How a browser renders a web page

Tip: Choose Save as PDF in the print dialog to download. Use A4 paper size.

How a browser renders a web page

Name:
Date:
Class:
A

Quick Questions

Shade in the A or B circle for each question.

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
2. Where does a browser usually get a web page's files from?
A The screen itself
B A web server
3. True or false: the browser reads HTML and paints it on screen.
A True
B False
4. Which is the visible result of rendering?
A A formatted page with headings and text
B The raw HTML shown as plain code
5. Does the content inside <body> appear in the rendered page?
A No, it is always hidden
B Yes, it is the visible content
B

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left columnRight column
1<!DOCTYPE html> AThe body tag is misspelled, so the browser renders no body region
2<body>...</body> BHolds the visible content the browser paints on screen
3The element that wraps the whole page the browser renders COpening and closing tag names do not match, so the heading will not render correctly
4The request a browser sends to fetch a page's files D<html></html>
5<boddy></boddy> ETells the browser to render the document as modern HTML
6<h1>Hi</h2> FGET /index.html
C

Definitions

rendering
D

Fill in the Blanks

Complete each line of code by filling in the missing parts.

1.
<___></html>
2.
<___></body>
3.
<!DOCTYPE ___>
4.
<___>Hello</h1>
5.
<body> </___>
E

Spot the Error

Shade in the letter of the line that contains an error.

Question 1
A <DOCTYPE html>
B <html>
C <body></body>
D </html>
Question 2
A <!DOCTYPE html>
B <html
C <body></body>
D </html>
Question 3
A <!DOCTYPE html>
B <html>
C <boddy>
D </body>
E </html>
Question 4
A <!DOCTYPE html>
B <html>
C <body>
D <h1>Hi<h1>
E </body>
F </html>
Question 5
A <!DOCTYPE html>
B <html>
C <body>
D <p>Text</p>
E <html>

Answer Key

How a browser renders a web page
Section A: Quick Questions
Q1
A — Renders it into a visible page
Q2
B — A web server
Q3
A — True
Q4
A — A formatted page with headings and text
Q5
B — Yes, it is the visible content
Section B: Match the Pairs
Q1
<!DOCTYPE html> → Tells the browser to render the document as modern HTML
Q2
<body>...</body> → Holds the visible content the browser paints on screen
Q3
The element that wraps the whole page the browser renders → <html></html>
Q4
The request a browser sends to fetch a page's files → GET /index.html
Q5
<boddy></boddy> → The body tag is misspelled, so the browser renders no body region
Q6
<h1>Hi</h2> → Opening and closing tag names do not match, so the heading will not render correctly
Section C: Definitions
Q1
rendering — Rendering is when the browser reads the HTML it received and paints it into the visible page shown on screen.
Section D: Fill in the Blanks
Q1
<html></html>
Q2
<body></body>
Q3
<!DOCTYPE html>
Q4
<h1>Hello</h1>
Q5
<body> </body>
Section E: Spot the Error
Q1
A — The declaration is missing its exclamation mark; it must be <!DOCTYPE html> so the browser renders the page in standards mode.
Q2
B — The opening html tag is missing its closing angle bracket; it should be <html> so the browser recognises the root element.
Q3
C — The opening tag is misspelled as <boddy>; the browser only renders a body region from a correctly spelled <body>.
Q4
D — The heading's closing tag is missing its slash; it should be </h1> so the browser knows where the heading ends.
Q5
E — The final line should close the document with </html>, not open another <html>, or the browser sees an unfinished page.