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.