How browsers read HTML - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare the document type for HTML5.

HTML

<!DOCTYPE [1]>

Drag options to blanks, or click blank then click option'

AHtml

Bhtml

Chtm

DHTML5

Attempts:

3 left

💡 Hint

Common Mistakes

Writing 'HTML5' instead of 'html'

Using uppercase letters

Omitting the DOCTYPE declaration

The correct declaration for HTML5 documents is <!DOCTYPE html>. It tells the browser to use the latest HTML standard.

2fill in blank

medium

Complete the code to start the HTML document with the root element.

HTML

<[1] lang="en">

Drag options to blanks, or click blank then click option'

Ahtml

Bhead

Cbody

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using <head> or <body> as the root

Using a <div> instead of <html>

The root element of an HTML document is <html>. It wraps all the content of the page.

3fill in blank

hard

Fix the error in the code to properly include the character encoding in the head section.

HTML

<head>
  <meta charset=[1]>
</head>

Drag options to blanks, or click blank then click option'

A"utf-8"

Butf8

C'utf-8'

DUTF-8

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the charset value

Using uppercase letters

Using single quotes instead of double quotes

The correct way to specify character encoding is <meta charset="utf-8">. The value must be in double quotes and lowercase.

4fill in blank

hard

Fill both blanks to create a semantic section with a heading.

HTML

<[1]>
  <[2]>Welcome to my website</[2]>
</[1]>

Drag options to blanks, or click blank then click option'

Asection

Bdiv

Ch1

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using <div> instead of <section>

Using <header> incorrectly

Using a non-heading tag for the title

The <section> tag defines a section of content, and <h1> is used for the main heading inside it.

5fill in blank

hard

Fill all three blanks to create a basic HTML document structure.

HTML

<!DOCTYPE html>
<[1] lang="en">
  <[2]>
    <meta charset="utf-8">
    <title>My Page</title>
  </[2]>
  <[3]>
    <p>Hello, world!</p>
  </[3]>
</[1]>

Drag options to blanks, or click blank then click option'

Ahtml

Bhead

Cbody

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping <head> and <body>

Using <footer> instead of <body>

Omitting the lang attribute on <html>

The root element is <html>. Inside it, <head> contains metadata like the title and charset, and <body> contains the visible content.

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