How browsers read HTML - Practice Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does a browser interpret HTML tags?

When a browser reads an HTML file, what does it do with the tags it finds?

A It reads tags to build a tree structure representing the page elements.

B It ignores all tags and only shows the text content.

C It converts tags into plain text before displaying.

D It sends tags to the server to process before showing anything.

💡 Hint

Think about how the browser knows where each element is placed on the page.

Browsers read HTML tags to create a tree called the Document Object Model (DOM). This tree helps the browser understand the structure and content of the page to display it correctly.

📝 Syntax

intermediate

What error occurs with missing closing tags?

Consider this HTML snippet:

<div><p>Hello</div>

What problem will the browser face when reading this?

A The browser will automatically close the <p> tag before </div> and display 'Hello'.

B The browser will show a blank page because of the error.

C The browser will throw a syntax error and stop rendering.

D The browser will ignore the <div> tag and only show the <p> content.

💡 Hint

Browsers try to fix small mistakes to still show the page.

Browsers are forgiving and will auto-close tags like <p> if a closing tag is missing, so the content still appears.

❓ rendering

advanced

What is the visual output of nested HTML elements?

Given this HTML:

<section>
  <article>
    <h1>Title</h1>
    <p>Paragraph</p>
  </article>
</section>

How will the browser display this content?

A Only the Title shows; the Paragraph is hidden inside the article.

B Title appears bold and large above the Paragraph with spacing below it.

C Title and Paragraph appear on the same line with no spacing.

D The browser shows raw HTML tags as text on the page.

💡 Hint

Think about default styles browsers apply to headings and paragraphs.

Browsers display <h1> as a large bold heading above the paragraph, with spacing separating them.

❓ selector

advanced

Which CSS selector targets all direct children of a <nav> element?

You want to style only the immediate child elements inside a <nav> tag. Which CSS selector should you use?

A nav ~ *

B nav *

C nav + *

D nav > *

💡 Hint

The '>' symbol in CSS means direct child.

The selector nav > * selects all elements that are direct children of <nav>.

❓ accessibility

expert

What is the effect of missing ARIA roles in a complex web page?

A web page has many sections and interactive elements but does not use ARIA roles. What problem will users with screen readers most likely face?

A Screen readers will read the page faster without ARIA roles.

B Screen readers will ignore all content without ARIA roles.

C Screen readers may not understand the page structure, making navigation confusing.

D Screen readers will automatically add ARIA roles to fix the page.

💡 Hint

ARIA roles help assistive technologies understand page parts.

Without ARIA roles, screen readers can struggle to identify landmarks and interactive elements, making it hard for users to navigate.

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